/* ========================================================================== MIRAI DATA Inc. - Main Stylesheet 写真主役のフォトグラフィック・コーポレートデザイン ========================================================================== */ :root { --color-ink: #0a0a0a; --color-navy: #101820; --color-navy-light: #1c2733; --color-accent: #0b63ce; --color-accent-dark: #084ba1; --color-teal: #14b8a6; --color-bg: #fdfdfd; --color-bg-alt: #f2f3f5; --color-text: #1a1a1a; --color-text-light: #61666e; --color-border: #e5e6e9; --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif; --font-en: "Barlow", "Noto Sans JP", sans-serif; --container-width: 1240px; --container-narrow: 880px; --radius: 2px; --section-space: 140px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* * The page colour lives here rather than on so the drafting grid * below can sit behind the body and still be seen. */ background: var(--color-bg); } body { margin: 0; font-family: var(--font-base); color: var(--color-text); background: transparent; line-height: 2; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* * Drafting grid behind the whole site — the same one the hero uses, carried * through every section so the page reads as one sheet. It is fixed, so the * content slides over it rather than dragging it along. */ body::before { content: ""; position: fixed; inset: -2px; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--color-navy) 1px, transparent 1px), linear-gradient(90deg, var(--color-navy) 1px, transparent 1px), radial-gradient(var(--color-navy) 1.6px, transparent 1.7px); background-size: 96px 96px, 96px 96px, 480px 480px; background-position: 0 0, 0 0, 48px 48px; opacity: 0.05; } /* ========================================================================== Site-wide drifting shapes A fixed layer behind . Each shape carries its own form, size, place and motion, so nothing ever falls into step with anything else. ========================================================================== */ .site-geo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--color-navy); } .site-geo-shape { position: absolute; opacity: 0.07; will-change: transform; } /* — outlined forms — */ .site-geo-shape--ring-1, .site-geo-shape--ring-2, .site-geo-shape--square-1, .site-geo-shape--square-2, .site-geo-shape--diamond { border: 1px solid currentColor; } .site-geo-shape--ring-1, .site-geo-shape--ring-2 { border-radius: 50%; } .site-geo-shape--ring-1 { width: 340px; height: 340px; left: -90px; top: 12%; animation: sgeo-orbit 22s linear infinite; } .site-geo-shape--ring-2 { width: 170px; height: 170px; right: 12%; top: 8%; opacity: 0.09; animation: sgeo-pulse 11s ease-in-out infinite; } /* Concentric rings, drawn as a repeating gradient */ .site-geo-shape--rings { width: 260px; height: 260px; right: -70px; bottom: 14%; border-radius: 50%; background-image: repeating-radial-gradient( circle, currentColor 0 1px, transparent 1px 26px ); opacity: 0.06; animation: sgeo-swing 17s ease-in-out infinite reverse; } .site-geo-shape--square-1 { width: 200px; height: 200px; left: 16%; bottom: 8%; animation: sgeo-spin 19s linear infinite; } .site-geo-shape--square-2 { width: 96px; height: 96px; right: 30%; top: 44%; opacity: 0.09; animation: sgeo-spin 12s linear infinite reverse; } .site-geo-shape--diamond { width: 130px; height: 130px; left: 46%; top: 16%; animation: sgeo-tumble 16s ease-in-out infinite; } /* — solid forms, kept fainter than the outlines — */ .site-geo-shape--triangle { width: 150px; height: 132px; left: 8%; top: 52%; background: currentColor; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); opacity: 0.045; animation: sgeo-drift 14s ease-in-out infinite; } .site-geo-shape--hexagon { width: 118px; height: 132px; right: 7%; top: 62%; background: currentColor; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); opacity: 0.045; animation: sgeo-tumble 18s ease-in-out infinite reverse; } /* A quarter-arc — one side of a ring */ .site-geo-shape--arc { width: 180px; height: 180px; left: 60%; bottom: 6%; border: 1px solid transparent; border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; opacity: 0.1; animation: sgeo-spin 15s linear infinite; } /* — patterned patches — */ .site-geo-shape--dots { width: 168px; height: 168px; left: 30%; top: 6%; background-image: radial-gradient(currentColor 1.5px, transparent 1.6px); background-size: 24px 24px; opacity: 0.09; animation: sgeo-drift 13s ease-in-out infinite reverse; } .site-geo-shape--hatch { width: 156px; height: 156px; left: 4%; top: 28%; background-image: repeating-linear-gradient( 45deg, currentColor 0 1px, transparent 1px 13px ); opacity: 0.06; animation: sgeo-orbit 20s linear infinite reverse; } .site-geo-shape--bars { width: 120px; height: 38px; right: 20%; bottom: 32%; background-image: linear-gradient(currentColor 1px, transparent 1px); background-size: 100% 12px; opacity: 0.09; animation: sgeo-swing 10s ease-in-out infinite; } .site-geo-shape--plus-1, .site-geo-shape--plus-2 { background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 100% 50%, 50% 100%; background-position: center, center; background-repeat: no-repeat; opacity: 0.16; } .site-geo-shape--plus-1 { width: 28px; height: 28px; left: 72%; top: 22%; animation: sgeo-tumble 8s ease-in-out infinite; } .site-geo-shape--plus-2 { width: 22px; height: 22px; left: 24%; bottom: 24%; animation: sgeo-pulse 7s ease-in-out infinite; } /* — six ways to move, with plenty of travel in each — */ @keyframes sgeo-orbit { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(130px, 70px, 0) rotate(45deg); } 50% { transform: translate3d(20px, 165px, 0) rotate(90deg); } 75% { transform: translate3d(-120px, 80px, 0) rotate(135deg); } 100% { transform: translate3d(0, 0, 0) rotate(180deg); } } @keyframes sgeo-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.18); } to { transform: rotate(360deg) scale(1); } } @keyframes sgeo-tumble { 0%, 100% { transform: rotate(0deg) translate3d(0, 0, 0); } 50% { transform: rotate(360deg) translate3d(85px, -95px, 0); } } @keyframes sgeo-pulse { 0%, 100% { transform: scale(1) translate3d(0, 0, 0) rotate(0deg); } 50% { transform: scale(1.5) translate3d(-70px, 85px, 0) rotate(-40deg); } } @keyframes sgeo-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 33% { transform: translate3d(140px, -60px, 0) rotate(50deg); } 66% { transform: translate3d(-60px, -125px, 0) rotate(-30deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } /* A wide side-to-side sweep, tilting as it goes */ @keyframes sgeo-swing { 0%, 100% { transform: translate3d(-90px, 0, 0) rotate(-22deg); } 50% { transform: translate3d(90px, -45px, 0) rotate(22deg); } } /* Small screens: keep a handful so the page stays light to paint */ @media (max-width: 780px) { .site-geo-shape--square-2, .site-geo-shape--hexagon, .site-geo-shape--bars, .site-geo-shape--hatch, .site-geo-shape--arc, .site-geo-shape--plus-1 { display: none; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent-dark); text-decoration: none; transition: opacity 0.3s ease, color 0.3s ease; } a:hover { opacity: 0.72; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { color: var(--color-navy); line-height: 1.45; margin: 0 0 0.7em; font-weight: 700; letter-spacing: 0.01em; } p { margin: 0 0 1.4em; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 40px; } .container--narrow { max-width: var(--container-narrow); } .screen-reader-text, .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; background: var(--color-navy); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 9999; } /* Buttons ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 40px; border-radius: 0; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.06em; border: 1px solid transparent; cursor: pointer; overflow: hidden; transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease; } .btn::after { content: "→"; font-family: var(--font-en); transition: transform 0.35s ease; } .btn:hover { opacity: 1; } .btn:hover::after { transform: translateX(5px); } .btn--primary { background: var(--color-navy); color: #fff; } .btn--primary:hover { background: var(--color-accent); color: #fff; } .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; } .btn--ghost:hover { background: #fff; color: var(--color-navy); border-color: #fff; } .btn--outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); } .btn--outline:hover { background: var(--color-navy); color: #fff; } .btn--lg { padding: 22px 56px; font-size: 1rem; } /* Preloader ========================================================================== */ .has-preloader { overflow: hidden; } .site-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 60%, #123a63 100%); transition: opacity 0.6s ease, visibility 0.6s ease; } .site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } html.is-returning-visit .site-preloader { display: none !important; } /* Logo mark — the "N" draws itself, then the real logo takes over */ .preloader-mark { position: relative; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .preloader-mark::before { content: ""; position: absolute; width: 190%; height: 190%; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0) 68%); opacity: 0; animation: preloader-glow 2.8s ease-out 0.5s infinite; } /* Stroke that traces the N */ .preloader-draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .preloader-draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: preloader-draw-n 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.12s forwards; } @keyframes preloader-draw-n { to { stroke-dashoffset: 0; } } /* Accent dots pop in as the stroke reaches each end */ .preloader-dot { opacity: 0; transform-origin: center; animation: preloader-dot-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .preloader-dot--1 { animation-delay: 0.62s; } .preloader-dot--2 { animation-delay: 1.12s; } @keyframes preloader-dot-pop { 0% { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } /* Once the sketch is complete it dissolves into the real logo */ /* * With a real logo set, the generic stroke is not drawn at all — the logo * itself is what gets drawn. A soft-edged mask sweeps across it from the left, * so the mark appears the way it would under a pen, and a light travels along * the leading edge as the tip. * * If masks are unsupported the mask simply does not apply and the logo is * there from the start, which is the right way for this to fail. */ .preloader-mark.has-logo .preloader-draw { display: none; } .preloader-logo { position: relative; width: 100%; height: 100%; object-fit: contain; border-radius: 22px; -webkit-mask-image: linear-gradient(100deg, #000 0 40%, rgba(0, 0, 0, 0.45) 49%, transparent 58%); mask-image: linear-gradient(100deg, #000 0 40%, rgba(0, 0, 0, 0.45) 49%, transparent 58%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* * Resting state is fully revealed, and the animation runs `backwards` from * hidden. That way a browser that will not animate mask-position simply * shows the logo rather than hiding it forever. */ -webkit-mask-position: 0 0; mask-position: 0 0; animation: preloader-logo-draw 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s backwards, preloader-logo-settle 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s, preloader-mark-float 3.2s ease-in-out 2.1s infinite; } @keyframes preloader-logo-draw { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } } /* A small kick the moment the stroke completes */ @keyframes preloader-logo-settle { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } } /* The pen tip, riding the leading edge of the sweep */ .preloader-mark.has-logo::after { content: ""; position: absolute; top: 8%; bottom: 8%; left: 2%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, transparent, #7dd3fc 24%, #ec4899 76%, transparent); box-shadow: 0 0 20px 5px rgba(125, 211, 252, 0.6); opacity: 0; animation: preloader-pen 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; } @keyframes preloader-pen { 0% { opacity: 0; left: 2%; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; left: 98%; } } @keyframes preloader-mark-in { 0% { opacity: 0; transform: scale(0.86); } 65% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } @keyframes preloader-mark-float { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.03) translateY(-6px); } } @keyframes preloader-glow { 0% { opacity: 0; transform: scale(0.7); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } } /* Rings pulsing out from behind the mark */ .preloader-ring { position: absolute; inset: -6px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 24px; opacity: 0; animation: preloader-ring-out 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s infinite; } .preloader-ring--delay { animation-delay: 1.75s; } @keyframes preloader-ring-out { 0% { opacity: 0.8; transform: scale(0.86); } 100% { opacity: 0; transform: scale(1.55); } } .preloader-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 90vw; } .preloader-char { display: inline-block; font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; color: #fff; letter-spacing: 0.04em; opacity: 0; transform: translateY(26px) scale(0.9); animation: preloader-char-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i) * 0.09s + 1.78s); } @keyframes preloader-char-in { to { opacity: 1; transform: translateY(0) scale(1); } } .preloader-en { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0; animation: preloader-fade-in 0.6s ease forwards; animation-delay: 2.34s; } @keyframes preloader-fade-in { to { opacity: 1; } } .preloader-bar { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; border-radius: 999px; } .preloader-bar span { display: block; height: 100%; width: 40%; background: var(--color-teal); animation: preloader-bar-slide 1.1s ease-in-out infinite; } @keyframes preloader-bar-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(350%); } } /* Hero entrance animation ========================================================================== */ .hero-eyebrow, .hero-title, .hero-lead, .hero-actions { opacity: 0; transform: translateY(24px); } html.is-loaded .hero-eyebrow { animation: hero-in 0.8s ease forwards; animation-delay: 0.1s; } html.is-loaded .hero-title { animation: hero-in 0.8s ease forwards; animation-delay: 0.26s; } html.is-loaded .hero-lead { animation: hero-in 0.8s ease forwards; animation-delay: 0.42s; } html.is-loaded .hero-actions { animation: hero-in 0.8s ease forwards; animation-delay: 0.58s; } @keyframes hero-in { to { opacity: 1; transform: translateY(0); } } /* Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; /* Per-element offset, set inline where a group should arrive in sequence */ transition-delay: var(--reveal-delay, 0s); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .business-card.reveal:nth-child(1) { transition-delay: 0.05s; } .business-card.reveal:nth-child(2) { transition-delay: 0.15s; } .business-card.reveal:nth-child(3) { transition-delay: 0.25s; } .business-card.reveal:nth-child(4) { transition-delay: 0.35s; } .mvv-card.reveal:nth-child(1) { transition-delay: 0.05s; } .mvv-card.reveal:nth-child(2) { transition-delay: 0.15s; } .mvv-card.reveal:nth-child(3) { transition-delay: 0.25s; } .value-card.reveal:nth-child(1) { transition-delay: 0.05s; } .value-card.reveal:nth-child(2) { transition-delay: 0.15s; } .value-card.reveal:nth-child(3) { transition-delay: 0.25s; } .recruit-card.reveal:nth-child(1) { transition-delay: 0.05s; } .recruit-card.reveal:nth-child(2) { transition-delay: 0.15s; } .recruit-card.reveal:nth-child(3) { transition-delay: 0.25s; } .recruit-card.reveal:nth-child(4) { transition-delay: 0.35s; } .career-item.reveal:nth-child(1) { transition-delay: 0.05s; } .career-item.reveal:nth-child(2) { transition-delay: 0.12s; } .career-item.reveal:nth-child(3) { transition-delay: 0.19s; } .career-item.reveal:nth-child(4) { transition-delay: 0.26s; } .career-item.reveal:nth-child(5) { transition-delay: 0.33s; } .career-item.reveal:nth-child(6) { transition-delay: 0.40s; } .gallery-item.reveal:nth-child(1) { transition-delay: 0.05s; } .gallery-item.reveal:nth-child(2) { transition-delay: 0.12s; } .gallery-item.reveal:nth-child(3) { transition-delay: 0.19s; } .gallery-item.reveal:nth-child(4) { transition-delay: 0.26s; } .gallery-item.reveal:nth-child(5) { transition-delay: 0.33s; } .gallery-item.reveal:nth-child(6) { transition-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .site-preloader, .preloader-char, .preloader-en, .preloader-bar span, .preloader-logo, .preloader-ring, .preloader-mark::before, .preloader-draw, .preloader-draw-path, .preloader-dot, .preloader-mark.has-logo::after, .reveal, .hero-eyebrow, .hero-title, .hero-lead, .hero-actions, .chat-bubble, .chat-typing, .chat-typing span { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } /* The typing indicator only makes sense while something is animating */ .chat-typing { display: none !important; } /* No drifting question marks either */ .hero-intro-marks { display: none !important; } /* The drafting marks stay, they just stop moving */ .hero-geo-grid, .hero-geo-shape, .site-geo-shape { animation: none !important; } .site-preloader { display: none !important; } } /* Header ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; } /* Pages without a photo hero need the solid bar from the start */ body:not(.home) .site-header { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; transition: height 0.4s ease; } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); } .site-header.is-scrolled .header-inner { height: 68px; } /* Over the hero photo the nav is white; once scrolled it flips to dark */ body.home .site-header:not(.is-scrolled) .primary-menu > li > a { color: #fff; } body.home .site-header:not(.is-scrolled) .menu-toggle-bar { background: #fff; } body:not(.home) .site-main { padding-top: 88px; } /* Logo — dark-on-white / light-on-navy pair ========================================================================== */ /* Keep the lockup at full size — never let the flex row squeeze it */ .site-branding { flex-shrink: 0; } .site-logo-link { display: inline-flex; align-items: center; } .site-logo { height: 54px; width: auto; /* beat the global img { max-width: 100% } so the height wins */ max-width: none; transition: height 0.4s ease, transform 0.3s ease; } /* Eases down slightly with the bar, but stays prominent */ .site-header.is-scrolled .site-logo { height: 48px; } .site-title { font-size: 1.32rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; transition: color 0.25s ease; } .site-title--dark { color: var(--color-navy); } .site-title--light { color: #fff; } /* Default (and every non-home page): show the dark/white-background variant */ .site-logo--light, .site-title--light { display: none; } /* Home page, before scrolling past the photo hero: show the light/navy-background variant */ body.home .site-header:not(.is-scrolled) .site-logo--dark, body.home .site-header:not(.is-scrolled) .site-title--dark { display: none; } body.home .site-header:not(.is-scrolled) .site-logo--light, body.home .site-header:not(.is-scrolled) .site-title--light { display: inline-block; } .site-logo-link:hover .site-logo { transform: scale(1.04); } .site-logo-link:hover .site-title--dark { color: var(--color-accent-dark); } .main-navigation { display: flex; align-items: center; gap: 8px; } .main-navigation .primary-menu { display: flex; align-items: center; gap: 6px; } .main-navigation .primary-menu > li { position: relative; } .main-navigation .primary-menu > li > a { position: relative; display: inline-block; font-weight: 600; color: var(--color-text); font-size: 0.95rem; letter-spacing: 0.01em; padding: 10px 16px; transition: color 0.25s ease; } .main-navigation .primary-menu > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-teal)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .main-navigation .primary-menu > li > a:hover { color: var(--color-accent-dark); } .main-navigation .primary-menu > li > a:hover::after, .main-navigation .primary-menu > li.current-menu-item > a::after, .main-navigation .primary-menu > li.current_page_item > a::after { transform: scaleX(1); } .main-navigation .primary-menu > li.current-menu-item > a, .main-navigation .primary-menu > li.current_page_item > a { color: var(--color-navy); } .main-navigation .primary-menu > li:last-child > a { margin-left: 8px; padding: 10px 24px; border-radius: 999px; background: var(--color-accent); color: #fff; box-shadow: 0 6px 16px rgba(30, 136, 229, 0.28); transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .main-navigation .primary-menu > li:last-child > a::after { display: none; } .main-navigation .primary-menu > li:last-child > a:hover { color: #fff; background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(30, 136, 229, 0.36); } .menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 6px; } .menu-toggle-bar { width: 22px; height: 2px; background: var(--color-navy); display: block; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } .main-navigation.is-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .main-navigation.is-open .menu-toggle-bar:nth-child(2) { opacity: 0; } .main-navigation.is-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Hero ========================================================================== */ .hero { --hero-image: none; /* * --scrim-opacity (0–1) comes from the "文字を読みやすくする幕の濃さ" % * slider, set inline per-page. The three gradient stops below are all * derived from that single number so the whole scrim scales together. */ --scrim-opacity: 0.7; --scrim-rgb: 10, 14, 20; --scrim-side: var(--scrim-opacity); --scrim-bottom: min(1, calc(var(--scrim-opacity) * 1.15)); --scrim-top: calc(var(--scrim-opacity) * 0.57); /* How far across the frame the shade reaches before the photo is left alone */ --scrim-reach: 68%; /* * Layered rather than one soft blur: the tight shadow carves an edge where * the headline crosses a pale part of the photo, the wide one pools shade * behind it. Kept in a variable because the marked words have to put it * back for as long as they are still bare over the photo. */ --hero-glow: 0 1px 2px rgba(6, 12, 24, 0.4), 0 4px 16px rgba(6, 12, 24, 0.55), 0 16px 48px rgba(6, 12, 24, 0.4); --hero-focus: center; position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 0 0 96px; color: #fff; overflow: hidden; background-color: var(--color-navy); } .hero::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-image); background-size: cover; background-position: var(--hero-focus); /* A touch of punch so the photo carries the section instead of sitting flat */ filter: contrast(1.08) saturate(1.14); transform: scale(1.08); animation: hero-zoom 12s ease-out forwards; } @keyframes hero-zoom { to { transform: scale(1); } } /* * A shaped scrim rather than one flat wash. A flat wash at a readable density * greys out the whole picture; here the shade is concentrated on the text side * and cleared off the subject, so the copy gets real contrast and the photo * keeps its own light. */ .hero::after { content: ""; position: absolute; inset: 0; background: /* Ground under the copy — dense at the left edge, gone by two thirds */ linear-gradient( 94deg, rgba(var(--scrim-rgb), calc(var(--scrim-side) * 2.1)) 0%, rgba(var(--scrim-rgb), calc(var(--scrim-side) * 1.45)) calc(var(--scrim-reach) * 0.382), rgba(var(--scrim-rgb), calc(var(--scrim-side) * 0.62)) calc(var(--scrim-reach) * 0.691), rgba(var(--scrim-rgb), 0) var(--scrim-reach) ), /* A thin band so the header stays legible, and a foot to sit the page on */ linear-gradient( to bottom, rgba(var(--scrim-rgb), calc(var(--scrim-top) * 1.25)) 0%, rgba(var(--scrim-rgb), 0) 20%, rgba(var(--scrim-rgb), 0) 60%, rgba(var(--scrim-rgb), var(--scrim-bottom)) 100% ); } /* Light mode — for bright, airy photos. Keeps the picture bright, text goes dark. */ .hero--light { --scrim-rgb: 255, 255, 255; /* White needs to run a bit denser than navy at the same % to read the same */ --scrim-side: min(1, calc(var(--scrim-opacity) * 1.12)); --scrim-bottom: min(1, calc(var(--scrim-opacity) * 1.1)); --scrim-top: calc(var(--scrim-opacity) * 0.68); /* A white veil doesn't dull a bright photo the way a dark one does, so it can reach further and cover the tail of a long headline */ --scrim-reach: 80%; --hero-glow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 4px 18px rgba(255, 255, 255, 0.85), 0 16px 48px rgba(255, 255, 255, 0.6); color: var(--color-text); background-color: #eef0f3; } /* Which part of the photo stays in frame */ .hero--focus-center { --hero-focus: center; } .hero--focus-left { --hero-focus: 25% center; } .hero--focus-right { --hero-focus: 75% center; } .hero--focus-top { --hero-focus: center 22%; } .hero-inner { position: relative; z-index: 1; width: 100%; } /* ========================================================================== Hero geometry — drafting marks scattered over the photo Everything is drawn in currentColor, so it inverts with the hero mode, and the layer is masked to fade out before it reaches the subject. ========================================================================== */ .hero-geo { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.4) 58%, transparent 78%); mask-image: linear-gradient(100deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.4) 58%, transparent 78%); } .hero-geo-grid { position: absolute; inset: -6%; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 96px 96px; opacity: 0.07; animation: geo-grid-drift 40s linear infinite; } @keyframes geo-grid-drift { to { transform: translate3d(96px, -96px, 0); } } .hero-geo-shape { position: absolute; opacity: 0.15; } .hero-geo-shape--ring, .hero-geo-shape--ring-sm { border: 1px solid currentColor; border-radius: 50%; } .hero-geo-shape--ring { width: 420px; height: 420px; left: -150px; bottom: -170px; animation: geo-float-a 12s ease-in-out infinite; } .hero-geo-shape--ring-sm { width: 190px; height: 190px; left: 34%; top: -80px; opacity: 0.12; animation: geo-float-b 10s ease-in-out infinite; } .hero-geo-shape--square, .hero-geo-shape--square-sm { border: 1px solid currentColor; } .hero-geo-shape--square { width: 156px; height: 156px; left: 5%; top: 20%; animation: geo-spin-a 16s linear infinite; } .hero-geo-shape--square-sm { width: 84px; height: 84px; left: 52%; bottom: 11%; opacity: 0.12; animation: geo-spin-b 13s linear infinite; } /* Dot matrices — the densest marks, so they stay the faintest */ .hero-geo-shape--dots, .hero-geo-shape--dots-sm { background-image: radial-gradient(currentColor 1.4px, transparent 1.5px); background-size: 24px 24px; opacity: 0.2; } /* This one lands behind the headline, so it runs fainter than the rest */ .hero-geo-shape--dots { width: 144px; height: 144px; left: 2%; bottom: 24%; opacity: 0.13; animation: geo-float-b 11s ease-in-out infinite; } .hero-geo-shape--dots-sm { width: 96px; height: 96px; left: 42%; top: 9%; opacity: 0.14; animation: geo-float-a 9s ease-in-out infinite reverse; } /* Three rules, like a measurement scale */ .hero-geo-shape--bars { animation: geo-float-b 19s ease-in-out infinite; width: 110px; height: 26px; left: 27%; bottom: 4%; background-image: linear-gradient(currentColor 1px, transparent 1px); background-size: 100% 12px; opacity: 0.18; } .hero-geo-shape--plus { width: 26px; height: 26px; left: 21%; top: 13%; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 100% 50%, 50% 100%; background-position: center, center; background-repeat: no-repeat; opacity: 0.28; animation: geo-float-a 7s ease-in-out infinite; } .hero-geo-shape--diag { animation: geo-spin-a 28s linear infinite; width: 180px; height: 180px; left: 60%; top: 26%; background-image: repeating-linear-gradient( 45deg, currentColor 0 1px, transparent 1px 14px ); opacity: 0.12; } @keyframes geo-float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22px, -18px, 0); } } @keyframes geo-float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-18px, 20px, 0); } } @keyframes geo-spin-a { from { transform: rotate(12deg); } to { transform: rotate(372deg); } } @keyframes geo-spin-b { from { transform: rotate(-18deg); } to { transform: rotate(-378deg); } } /* Bottom-right corner — masked into the corner rather than off the right edge, so the marks sit on the desk and never climb into the subject. */ .hero-geo--corner { -webkit-mask-image: radial-gradient(115% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 64%); mask-image: radial-gradient(115% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 64%); } .hero-geo-shape--c-ring, .hero-geo-shape--c-ring-sm, .hero-geo-shape--c-square { border: 1px solid currentColor; } .hero-geo-shape--c-ring, .hero-geo-shape--c-ring-sm { border-radius: 50%; } .hero-geo-shape--c-ring { width: 320px; height: 320px; right: -110px; bottom: -130px; animation: geo-float-b 14s ease-in-out infinite; } .hero-geo-shape--c-ring-sm { width: 118px; height: 118px; right: 21%; bottom: 21%; opacity: 0.13; animation: geo-float-a 8s ease-in-out infinite; } .hero-geo-shape--c-square { width: 104px; height: 104px; right: 6%; bottom: 30%; opacity: 0.13; animation: geo-spin-b 15s linear infinite; } .hero-geo-shape--c-dots { width: 132px; height: 132px; right: 11%; bottom: 6%; background-image: radial-gradient(currentColor 1.4px, transparent 1.5px); background-size: 24px 24px; opacity: 0.16; animation: geo-float-a 17s ease-in-out infinite reverse; } .hero-geo-shape--c-bars { animation: geo-float-a 21s ease-in-out infinite reverse; width: 96px; height: 26px; right: 30%; bottom: 9%; background-image: linear-gradient(currentColor 1px, transparent 1px); background-size: 100% 12px; opacity: 0.16; } .hero-geo-shape--c-plus { width: 24px; height: 24px; right: 24%; bottom: 33%; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 100% 50%, 50% 100%; background-position: center, center; background-repeat: no-repeat; opacity: 0.24; animation: geo-float-b 6s ease-in-out infinite; } /* Narrow screens have no room to spare — keep only the quietest marks */ @media (max-width: 780px) { .hero-geo-shape--dots-sm, .hero-geo-shape--square-sm, .hero-geo-shape--diag, .hero-geo-shape--bars, .hero-geo-shape--c-ring-sm, .hero-geo-shape--c-square, .hero-geo-shape--c-bars { display: none; } .hero-geo-grid { background-size: 68px 68px; } } /* ========================================================================== Hero intro — phase 1 A dark, tech-looking stage that plays the chat, then flashes out to reveal the real hero underneath. Only present while `.hero.is-intro` is set. ========================================================================== */ /* * While the intro runs, the real hero waits in the wings. Visible is the * default state, so if these transitions never run — no JS, an old browser, * a stalled animation — the hero is simply there. */ .hero-inner, .hero-scroll { transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s; } .hero.is-intro .hero-inner, .hero.is-intro .hero-scroll { opacity: 0; transform: translateY(14px); pointer-events: none; transition-delay: 0s; } /* * When an intro is playing, the block-level fade above would blur together * with the line-by-line entrance below, so the wrapper stays put and each * line does its own work. */ .hero.has-intro .hero-inner { opacity: 1; transform: none; transition: none; } .hero.has-intro.is-intro .hero-inner { pointer-events: none; } /* The Scroll cue waits until the copy has finished arriving */ .hero.has-intro.is-done .hero-scroll { transition-delay: 1.3s; } /* * Phase 2 entrance. The preloader normally triggers this on `html.is-loaded`, * but with an intro in front the copy has to hold still until the flash — so * it is reset here and replayed, line by line, once the photo is revealed. */ .hero.has-intro .hero-eyebrow, .hero.has-intro .hero-title, .hero.has-intro .hero-lead, .hero.has-intro .hero-actions { animation: none; opacity: 0; transform: translateY(30px); } .hero.has-intro.is-done .hero-eyebrow, .hero.has-intro.is-done .hero-title, .hero.has-intro.is-done .hero-lead, .hero.has-intro.is-done .hero-actions { animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero.has-intro.is-done .hero-eyebrow { animation-delay: 0.1s; } .hero.has-intro.is-done .hero-title { animation-delay: 0.28s; } .hero.has-intro.is-done .hero-lead { animation-delay: 0.52s; } .hero.has-intro.is-done .hero-actions { animation-delay: 0.72s; } .hero-intro { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; /* The header is fixed on top of this layer — keep the thread clear of it */ padding: 104px 0 48px; background: #05070b; overflow: hidden; transition: opacity 0.4s ease; } /* Removed from view the moment the flash peaks */ .hero.is-done .hero-intro { opacity: 0; visibility: hidden; } /* Only render the intro when it is actually playing */ .hero:not(.is-intro):not(.is-flash):not(.is-done) .hero-intro, .hero:not(.is-intro):not(.is-flash):not(.is-done) .hero-flash { display: none; } /* Faint technical grid */ .hero-intro-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 62px 62px; /* fade the grid out towards the edges */ -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%); animation: intro-grid-drift 24s linear infinite; } @keyframes intro-grid-drift { to { transform: translate3d(62px, 62px, 0); } } /* Slow-drifting colour orbs */ .hero-intro-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; } .hero-intro-orb--1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: #0b63ce; animation: intro-orb-a 18s ease-in-out infinite; } .hero-intro-orb--2 { width: 38vw; height: 38vw; right: -6vw; bottom: -14vw; background: #ec4899; animation: intro-orb-b 21s ease-in-out infinite; } .hero-intro-orb--3 { width: 32vw; height: 32vw; right: 22vw; top: -10vw; background: #7c3aed; animation: intro-orb-a 26s ease-in-out infinite reverse; } @keyframes intro-orb-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 5vw, 0) scale(1.12); } } @keyframes intro-orb-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7vw, -4vw, 0) scale(1.1); } } /* Floating question marks — the visitor's "?"s drifting up through the stage. Each one gets its own lane, size, tint and timing from inline custom properties, so nothing ever lines up into a visible pattern. */ .hero-intro-marks { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .hero-intro-mark { position: absolute; left: var(--x, 50%); bottom: -14%; font-family: var(--font-en); font-weight: 800; font-size: var(--size, 32px); line-height: 1; color: var(--tone, rgba(255, 255, 255, 0.85)); text-shadow: 0 0 26px currentColor; opacity: 0; animation: intro-mark-float var(--dur, 14s) linear var(--delay, 0s) infinite; will-change: transform, opacity; } /* Wanders rather than rising straight, so it reads as floating, not scrolling */ @keyframes intro-mark-float { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.55); } 12% { opacity: var(--peak, 0.45); } 35% { transform: translate3d(calc(var(--drift, 40px) * 0.7), -32vh, 0) rotate(calc(var(--tilt, 20deg) * 0.35)) scale(1); } 62% { transform: translate3d(calc(var(--drift, 40px) * -0.45), -64vh, 0) rotate(calc(var(--tilt, 20deg) * 0.75)) scale(1.06); } 80% { opacity: var(--peak, 0.45); } 100% { opacity: 0; transform: translate3d(var(--drift, 40px), -122vh, 0) rotate(var(--tilt, 20deg)) scale(1.15); } } @media (max-width: 640px) { .hero-intro-mark { font-size: calc(var(--size, 32px) * 0.66); } } .hero-intro-inner { position: relative; z-index: 2; width: 100%; } /* White flash that hands over from the intro to the real hero */ .hero-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; } .hero.is-flash .hero-flash { animation: hero-flash 0.62s ease-out forwards; } @keyframes hero-flash { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } } /* Chat thread -------------------------------------------------------------------------- */ /* * The thread has to fit between the header and the bottom of the viewport at * any window height, so its rhythm is tied to vh and capped at the sizes that * look right on a full-height screen. */ .chat-thread { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2.3vh, 22px); width: 100%; max-width: 880px; margin: 0 auto; } .chat-bubble, .chat-typing { opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .chat-bubble.is-in, .chat-typing.is-in { opacity: 1; transform: translateY(0) scale(1); } /* Question bubbles — the visitor's worries */ .chat-bubble--q { position: relative; max-width: 84%; padding: clamp(12px, 2.3vh, 22px) clamp(24px, 3vh, 36px); background: rgba(255, 255, 255, 0.96); color: var(--color-navy); font-size: clamp(1rem, 2.8vh, 1.5rem); font-weight: 600; line-height: 1.6; border-radius: 26px 26px 26px 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); } /* Slight stagger left-to-right so it feels hand-placed, not stacked */ .chat-bubble--q:nth-child(even) { margin-left: 80px; } .chat-bubble--q:nth-child(3) { margin-left: 32px; } /* Gentle bobbing once a bubble has landed */ .chat-bubble--q.is-in { animation: chat-float 4s ease-in-out infinite; } .chat-bubble--q:nth-child(2).is-in { animation-delay: 0.4s; } .chat-bubble--q:nth-child(3).is-in { animation-delay: 0.8s; } .chat-bubble--q:nth-child(4).is-in { animation-delay: 1.2s; } .chat-bubble--q:nth-child(5).is-in { animation-delay: 1.6s; } @keyframes chat-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1); } } /* * Typing indicator before the answer lands. It sits out of the flow, in the * corner the answer is about to fill — the dots are replaced by the reply, the * way a real thread behaves, and the column keeps that height for the bubbles. */ .chat-typing { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; padding: clamp(10px, 1.8vh, 18px) 22px; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px 20px 4px 20px; } .chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: chat-dot 1.2s ease-in-out infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.15s; } .chat-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } } /* The answer — the company's reply */ .chat-bubble--a { align-self: flex-end; max-width: 94%; padding: clamp(16px, 3.5vh, 34px) clamp(26px, 4vh, 44px); background: linear-gradient(120deg, var(--color-accent) 0%, #7c3aed 55%, #ec4899 100%); color: #fff; font-size: clamp(1.2rem, min(3.4vw, 4.4vh), 2.4rem); font-weight: 800; line-height: 1.5; border-radius: 30px 30px 6px 30px; box-shadow: 0 22px 50px rgba(124, 58, 237, 0.45); } /* A soft pulse the moment the answer appears */ .chat-bubble--a.is-in { animation: chat-answer-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes chat-answer-pop { 0% { transform: translateY(18px) scale(0.9); } 55% { transform: translateY(0) scale(1.04); } 100% { transform: translateY(0) scale(1); } } /* Short windows (small laptops, landscape phones): tighten everything so the whole thread still clears the header and the bottom edge. */ @media (max-height: 640px) { .hero-intro { padding: 74px 0 30px; } /* Still scaled rather than fixed — this band covers 470px to 640px tall */ .chat-thread { gap: clamp(6px, 1.9vh, 13px); max-width: 720px; } .chat-bubble--q { padding: clamp(8px, 2vh, 14px) clamp(18px, 2.6vh, 26px); font-size: clamp(0.85rem, 2.6vh, 1.1rem); line-height: 1.5; border-radius: 20px 20px 20px 5px; } .chat-bubble--q:nth-child(even) { margin-left: 48px; } .chat-bubble--q:nth-child(3) { margin-left: 20px; } .chat-typing { padding: 9px 16px; } .chat-bubble--a { padding: clamp(12px, 2.8vh, 20px) clamp(20px, 3.2vh, 30px); font-size: clamp(1rem, 3.4vh, 1.4rem); line-height: 1.5; border-radius: 22px 22px 5px 22px; } } .hero-eyebrow { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.78rem; color: rgba(255, 255, 255, 0.92); font-weight: 600; margin-bottom: 28px; padding-left: 62px; position: relative; text-shadow: 0 2px 12px rgba(6, 12, 24, 0.65); } .hero-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 44px; height: 1px; background: rgba(255, 255, 255, 0.6); } .hero-title { color: #fff; /* * The lower bound used to be 2.2rem, which on a 375px screen rendered at * 35.2px — wide enough that the first line of the headline needed 386px of * a 319px column, so it wrapped and left a two-character orphan hanging on * its own line. Measured with the real font rather than estimated. */ font-size: clamp(1.5rem, 7vw, 4.6rem); font-weight: 900; line-height: 1.32; letter-spacing: 0.02em; margin-bottom: 32px; text-shadow: var(--hero-glow); } .hero-lead { max-width: 620px; font-size: 1.02rem; line-height: 2.1; color: rgba(255, 255, 255, 0.94); margin-bottom: 48px; text-shadow: 0 2px 14px rgba(6, 12, 24, 0.7); } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Buttons have to hold their shape wherever the photo happens to be bright */ .hero .btn { box-shadow: 0 14px 34px rgba(6, 12, 24, 0.32); } .hero .btn--ghost { background: rgba(10, 16, 28, 0.28); border-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); } /* The fill above outranks the shared hover, so restate it */ .hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--color-navy); } .hero--light .btn--ghost { background: rgba(255, 255, 255, 0.55); } .hero-scroll { position: absolute; right: 40px; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--font-en); font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); writing-mode: vertical-rl; } .hero-scroll::after { content: ""; width: 1px; height: 72px; background: rgba(255, 255, 255, 0.4); animation: scroll-line 2s ease-in-out infinite; transform-origin: top; } /* Light hero — flip every piece of text to the dark palette -------------------------------------------------------------------------- */ .hero--light .hero-eyebrow { color: var(--color-accent-dark); text-shadow: 0 2px 12px rgba(255, 255, 255, 0.75); } .hero--light .hero-eyebrow::before { background: var(--color-accent); } .hero--light .hero-title { color: var(--color-navy); } .hero--light .hero-lead { color: var(--color-text); text-shadow: 0 2px 14px rgba(255, 255, 255, 0.85); } .hero--light .hero-scroll { color: rgba(16, 24, 32, 0.6); } .hero--light .hero-scroll::after { background: rgba(16, 24, 32, 0.35); } /* Same indicator, dark-text version — for the plain light-grey .page-hero (and anywhere else a hero sits on a light background outside .hero--light) */ .hero-scroll--onlight { color: rgba(16, 24, 32, 0.55); } .hero-scroll--onlight::after { background: rgba(16, 24, 32, 0.32); } /* Shorter heroes (page-hero, biz-hero) get a shorter line so it doesn't crowd the title */ .hero-scroll--compact { right: 24px; bottom: 18px; gap: 10px; } .hero-scroll--compact::after { height: 40px; } /* The outline button reads as light-on-dark by default */ .hero--light .btn--ghost { border-color: rgba(16, 24, 32, 0.45); color: var(--color-navy); } .hero--light .btn--ghost:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; } /* Header sitting over a light hero needs the dark logo and dark nav labels */ body.home.hero-light .site-header:not(.is-scrolled) .primary-menu > li > a { color: var(--color-text); } body.home.hero-light .site-header:not(.is-scrolled) .menu-toggle-bar { background: var(--color-navy); } body.home.hero-light .site-header:not(.is-scrolled) .site-logo--light, body.home.hero-light .site-header:not(.is-scrolled) .site-title--light { display: none; } body.home.hero-light .site-header:not(.is-scrolled) .site-logo--dark, body.home.hero-light .site-header:not(.is-scrolled) .site-title--dark { display: block; } /* …but while the dark intro is on screen, the header goes back to white */ html.mk-intro body.home .site-header:not(.is-scrolled) .primary-menu > li > a { color: #fff; } html.mk-intro body.home .site-header:not(.is-scrolled) .menu-toggle-bar { background: #fff; } html.mk-intro body.home .site-header:not(.is-scrolled) .site-logo--dark, html.mk-intro body.home .site-header:not(.is-scrolled) .site-title--dark { display: none; } html.mk-intro body.home .site-header:not(.is-scrolled) .site-logo--light, html.mk-intro body.home .site-header:not(.is-scrolled) .site-title--light { display: block; } @keyframes scroll-line { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } /* Sections ========================================================================== */ .section { padding: var(--section-space) 0; } .section--overview { background: var(--color-bg-alt); } /* * Sections that paint their own background would punch a hole in the sheet, so * they carry their own copy of the grid. `currentColor` picks up dark lines on * the pale bands and light ones on the navy; `background-attachment: fixed` * anchors every copy to the viewport, the same as the layer behind , so * the lines run straight through a section edge instead of jumping at it. */ .section--overview, .section--profile, .site-footer { position: relative; } .section--overview::before, .section--profile::before, .section--mvv::after, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px), radial-gradient(currentColor 1.6px, transparent 1.7px); background-size: 96px 96px, 96px 96px, 480px 480px; background-position: 0 0, 0 0, 48px 48px; background-attachment: fixed; opacity: 0.05; } /* Lift the content back above its section's grid */ .section--overview > .container, .section--profile > .container, .site-footer > .footer-cta, .site-footer > .footer-main, .site-footer > .footer-bottom { position: relative; z-index: 1; } .section-head { max-width: 720px; margin: 0 0 72px; } .section-eyebrow { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; font-weight: 600; color: var(--color-accent); margin-bottom: 20px; padding-left: 56px; position: relative; } .section-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 1px; background: var(--color-accent); } .section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 900; line-height: 1.4; margin-bottom: 20px; } .section-desc { color: var(--color-text-light); font-size: 1rem; margin-bottom: 0; } /* Business — photo-led alternating layout ========================================================================== */ .business-lead { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; margin-bottom: 110px; } .business-lead--reverse .business-lead-media { order: -1; } .business-lead-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); } .business-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .business-lead:hover .business-lead-media img { transform: scale(1.05); } .business-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; } .business-badge::before { content: ""; width: 28px; height: 1px; background: currentColor; } .business-badge--teal { color: var(--color-teal); } .business-lead-text h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 900; margin-bottom: 22px; } .business-lead-text p { color: var(--color-text-light); margin-bottom: 0; } .business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .business-grid--2 { grid-template-columns: repeat(2, 1fr); } .business-card { position: relative; background: var(--color-bg-alt); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 36px; color: #fff; isolation: isolate; } .business-card-photo { position: absolute; inset: 0; z-index: -2; } .business-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .business-card:hover .business-card-photo img { transform: scale(1.06); } .business-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(16, 24, 32, 0.15) 0%, rgba(16, 24, 32, 0.55) 55%, rgba(16, 24, 32, 0.92) 100%); transition: background 0.4s ease; } .business-card:hover::before { background: linear-gradient(to bottom, rgba(16, 24, 32, 0.3) 0%, rgba(16, 24, 32, 0.68) 55%, rgba(16, 24, 32, 0.95) 100%); } /* Fallback when no photo is set — solid navy card */ .business-card--nophoto { background: var(--color-navy); } .business-card--nophoto::before { background: linear-gradient(160deg, rgba(11, 99, 206, 0.25), transparent 60%); } .business-card-number { font-family: var(--font-en); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; } .business-icon { display: inline-flex; width: 40px; height: 40px; color: #fff; margin-bottom: 20px; opacity: 0.9; } .business-icon svg { width: 100%; height: 100%; } .business-title { font-size: 1.24rem; font-weight: 700; color: #fff; margin-bottom: 14px; } .business-desc { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; line-height: 1.9; margin-bottom: 0; } /* Mission / Vision / Value ========================================================================== */ .section--mvv { --mvv-image: none; position: relative; background: var(--color-navy); color: #fff; overflow: hidden; } .section--mvv.has-bg::before { content: ""; position: absolute; inset: 0; background-image: var(--mvv-image); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.28; } .section--mvv .container { position: relative; z-index: 1; } .section--mvv .section-title { color: #fff; } .section--mvv .section-eyebrow { color: var(--color-teal); } .section--mvv .section-eyebrow::before { background: var(--color-teal); } .mvv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .mvv-grid--2 { grid-template-columns: repeat(2, 1fr); } .mvv-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 56px 44px; backdrop-filter: blur(6px); } .mvv-card h3 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 900; margin-bottom: 18px; } .mvv-label { display: block; font-family: var(--font-en); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3em; color: var(--color-teal); margin-bottom: 22px; text-transform: uppercase; } .mvv-card p { color: rgba(255, 255, 255, 0.8); margin-bottom: 0; font-size: 0.95rem; } .value-block { margin-top: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 56px 44px; backdrop-filter: blur(6px); } .value-block-head { margin-bottom: 44px; } .value-block-head h3 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 900; margin-bottom: 0; } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .value-card { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 26px; } .value-card h4 { color: #fff; font-size: 1.05rem; margin-bottom: 12px; } .value-card p { color: rgba(255, 255, 255, 0.75); margin-bottom: 0; font-size: 0.9rem; } /* Message section ========================================================================== */ .message-inner { max-width: var(--container-narrow); } .message-inner.has-photo { max-width: var(--container-width); display: grid; grid-template-columns: 0.85fr 1fr; gap: 80px; align-items: center; } .message-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; /* Same reasoning as the portrait on the 代表挨拶 hero: drop the empty sky */ object-position: center bottom; } .message-text p { color: var(--color-text-light); } .message-signature { color: var(--color-navy); font-weight: 700; margin-bottom: 28px; } .message-full p { color: var(--color-text-light); font-size: 1.02rem; } /* First paragraph of the letter gets an editorial lead-in treatment */ .message-full > p:first-child { font-size: 1.18rem; line-height: 2.05; color: var(--color-text); font-weight: 500; } .message-signature-block { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--color-border); text-align: right; } .message-signature-title { color: var(--color-text-light); font-size: 0.88rem; margin-bottom: 6px; } .message-signature-name { font-size: 1.35rem; font-weight: 900; color: var(--color-navy); margin-bottom: 0; } /* Message page — photo hero ========================================================================== */ .message-hero { position: relative; min-height: 72vh; display: flex; align-items: center; padding: 150px 0 90px; background: var(--color-navy); color: #fff; overflow: hidden; } .message-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 14, 20, 0.5) 0%, rgba(10, 14, 20, 0.35) 45%, rgba(10, 14, 20, 0.9) 100%); } /* * Portrait on the left, copy on the right, the two sitting next to each other * rather than pushed to opposite edges — space-between left a dead gap down the * middle of the screen once the text block hit its max-width. * * The photo comes second in the markup so the

stays first in reading order; * the columns are assigned explicitly to flip it visually. / .message-hero-inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 72px; } / Without a photo the copy simply takes the full width / .message-hero:not(.has-photo) .message-hero-inner { grid-template-columns: minmax(0, 1fr); } .message-hero-text { grid-column: 2; max-width: 640px; } .message-hero:not(.has-photo) .message-hero-text { grid-column: 1; } .message-hero-photo { grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; / * The source is a three-quarter shot with a lot of empty sky above the * subject. Anchoring the crop to the bottom drops that dead space and lands * the face in the upper third of the card, which is where a portrait wants * it. Verified by rendering the exact object-fit crop rather than by eye. / object-position: center bottom; border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .message-hero .section-eyebrow { color: rgba(255, 255, 255, 0.9); } .message-hero .section-eyebrow::before { background: rgba(255, 255, 255, 0.7); } .message-hero-title { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; margin-bottom: 32px; } .message-hero-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.25); max-width: 560px; } .message-hero-role { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); } .message-hero-ja { font-size: 1.5rem; font-weight: 700; color: #fff; } .message-hero-en { font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } / Pull quote ========================================================================== / .section--quote { padding-bottom: 0; } .message-quote { margin: 0; padding-left: 40px; border-left: 3px solid var(--color-accent); font-size: clamp(1.3rem, 2.8vw, 2rem); font-weight: 900; line-height: 1.75; color: var(--color-navy); } .section--message-body { padding-top: 96px; } / Career timeline ========================================================================== / .section--profile { background: var(--color-bg-alt); } .career-timeline { max-width: 800px; margin: 0; padding: 0; list-style: none; counter-reset: career; } .career-item { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 32px; padding: 0 0 44px 0; } .career-item::before { content: ""; position: absolute; left: 137px; top: 12px; bottom: -12px; width: 1px; background: var(--color-border); } .career-item:last-child::before { display: none; } .career-item::after { content: ""; position: absolute; left: 132px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg-alt); } .career-year { font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; color: var(--color-navy); line-height: 1.2; padding-top: 2px; } .career-body { padding-left: 24px; } .career-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } .career-desc { color: var(--color-text-light); font-size: 0.94rem; margin-bottom: 0; } / Overview table ========================================================================== / .overview-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 16px rgba(13, 35, 64, 0.06); } .overview-table th, .overview-table td { padding: 20px 28px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .overview-table th { width: 180px; background: var(--color-bg-alt); color: var(--color-navy); font-weight: 700; } .overview-table tr:last-child th, .overview-table tr:last-child td { border-bottom: none; } .overview-actions { margin-top: 32px; text-align: center; } .plain-list li { display: inline-block; margin-right: 12px; } .plain-list li:not(:last-child)::after { content: "／"; margin-left: 12px; color: var(--color-text-light); } / CTA ========================================================================== / .section--cta { background: var(--color-navy); color: #fff; text-align: center; } .section--cta h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 900; margin-bottom: 20px; } .cta-inner p { color: rgba(255, 255, 255, 0.75); margin-bottom: 44px; } / Page templates ========================================================================== / .page-hero { position: relative; background: var(--color-bg-alt); padding: 88px 0 72px; border-bottom: 1px solid var(--color-border); overflow: hidden; } .page-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; margin-bottom: 0; } .page-container { display: flex; gap: 48px; align-items: flex-start; } .content-area { flex: 1; min-width: 0; } .page-container--single .content-area { max-width: 820px; margin: 0 auto; } .single-post-back { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); } .page-content { color: var(--color-text-light); } .page-content h2, .page-content h3 { color: var(--color-navy); margin-top: 1.6em; } / Legal pages (プライバシーポリシー, etc.) -------------------------------------------------------------------------- / .legal-content { color: var(--color-text-light); font-size: 0.98rem; } .legal-content > p { line-height: 2; margin-bottom: 1.6em; } .legal-content h2 { color: var(--color-navy); font-size: 1.28rem; font-weight: 800; margin: 2.4em 0 0.9em; padding-left: 18px; border-left: 4px solid var(--color-accent); } .legal-content h2:first-of-type { margin-top: 0.4em; } / Sub-clauses (8-1, 8-2 …) — clearly subordinate to the numbered article above / .legal-content h3 { color: var(--color-navy); font-size: 1.02rem; font-weight: 700; margin: 1.9em 0 0.7em; } .legal-content h2 + h3 { margin-top: 1.2em; } .legal-table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 0.92rem; } .legal-table th, .legal-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-border); line-height: 1.8; } .legal-table th { width: 34%; color: var(--color-navy); font-weight: 700; background: var(--color-bg-alt); } .legal-list { margin: 0 0 1.6em; padding-left: 1.4em; line-height: 2; } .legal-list li { margin-bottom: 0.4em; } .legal-dl { margin: 0 0 1.6em; padding: 24px 28px; background: var(--color-bg-alt); } .legal-dl dt { color: var(--color-navy); font-weight: 700; font-size: 0.82rem; margin-top: 1.1em; } .legal-dl dt:first-child { margin-top: 0; } .legal-dl dd { margin: 0.3em 0 0; } .legal-date { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--color-border); color: var(--color-text-light); font-size: 0.86rem; } @media (max-width: 640px) { .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr { display: block; } .legal-table th { width: auto; padding-bottom: 4px; border-bottom: none; } .legal-table td { padding-top: 4px; } .legal-table tr { margin-bottom: 18px; } } / Contact ========================================================================== / .page-container--contact { align-items: flex-start; } .contact-info { width: 300px; flex-shrink: 0; background: var(--color-bg-alt); border-radius: var(--radius); padding: 28px; } .contact-info h2 { font-size: 1.05rem; margin-bottom: 18px; } .contact-info dt { font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 4px; } .contact-info dd { margin: 0 0 16px; font-weight: 600; color: var(--color-navy); } .contact-form { max-width: 620px; } .form-row { margin-bottom: 22px; } .form-row label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--color-navy); font-size: 0.92rem; } .form-row .required { color: #e53935; font-size: 0.75rem; font-weight: 700; margin-left: 4px; } .form-row input[type="text"], .form-row input[type="email"], .form-row textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--color-text); } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15); } .form-row--honeypot { position: absolute; left: -9999px; } .form-row--submit { margin-top: 32px; } .form-notice { padding: 16px 20px; border-radius: 8px; margin-bottom: 28px; font-size: 0.92rem; } .form-notice--success { background: #e6f7f0; color: #0f6b46; border: 1px solid #b6e6cf; } .form-notice--error { background: #fdecea; color: #b3261e; border: 1px solid #f7c9c4; } .form-notice ul { margin: 0; padding-left: 20px; list-style: disc; } / Blog listing (お知らせ) ========================================================================== / .archive-title { margin-bottom: 40px; } .post-list { display: flex; flex-direction: column; gap: 20px; } .post-card { display: flex; gap: 32px; padding: 0 0 28px; background: transparent; border: none; border-bottom: 1px solid var(--color-border); transition: opacity 0.3s ease; } .post-card:hover { opacity: 0.72; } .post-card-thumb { width: 260px; flex-shrink: 0; overflow: hidden; aspect-ratio: 3 / 2; } .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); } .post-card:hover .post-card-thumb img { transform: scale(1.05); } .post-card-body { flex: 1; min-width: 0; padding-top: 4px; } .post-card-date { display: inline-block; font-family: var(--font-en); color: var(--color-text-light); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; margin-bottom: 12px; } .post-card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; } .post-card-title a { color: var(--color-navy); } .post-card-excerpt { color: var(--color-text-light); } .post-card-link { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 0.88rem; } .empty-state { background: var(--color-bg-alt); border-radius: var(--radius); padding: 48px; text-align: center; color: var(--color-text-light); } / Recruit ========================================================================== / .recruit-intro { font-size: 1.05rem; color: var(--color-text-light); margin-bottom: 40px; } .recruit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 40px; margin-bottom: 72px; } .recruit-card { background: transparent; border: none; padding: 0; } .recruit-card-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 28px; background: var(--color-bg-alt); } .recruit-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .recruit-card:hover .recruit-card-photo img { transform: scale(1.05); } .recruit-card-head h2, .recruit-card-head h3 { font-size: 1.4rem; font-weight: 900; margin-bottom: 8px; } .recruit-catch { color: var(--color-accent); } .recruit-catch { color: var(--color-accent-dark); font-weight: 700; font-size: 0.92rem; margin-bottom: 20px; } .recruit-spec { display: grid; grid-template-columns: 88px 1fr; gap: 10px 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--color-border); } .recruit-spec dt { color: var(--color-text-light); font-size: 0.82rem; font-weight: 700; } .recruit-spec dd { margin: 0; color: var(--color-navy); font-size: 0.92rem; } .recruit-cta { text-align: center; background: var(--color-bg-alt); border-radius: var(--radius); padding: 40px; } .recruit-cta p { color: var(--color-text-light); margin-bottom: 24px; } / Gallery ========================================================================== / .section--gallery { padding-bottom: calc(var(--section-space) - 20px); } .gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .gallery-item { margin: 0; overflow: hidden; position: relative; grid-column: span 2; aspect-ratio: 4 / 3; } / First two photos span wider for an editorial, uneven rhythm / .gallery-item:nth-child(1), .gallery-item:nth-child(2) { grid-column: span 3; aspect-ratio: 16 / 9; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px 20px; font-size: 0.85rem; color: #fff; background: linear-gradient(to top, rgba(16, 24, 32, 0.85), transparent); } / Home news preview ========================================================================== / .post-list--home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .post-list--home .post-card { flex-direction: column; gap: 20px; border-bottom: none; padding-bottom: 0; } .post-list--home .post-card-thumb { width: 100%; } / Page lead photo (used on company / message / recruit pages) ========================================================================== / .page-lead-photo { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; margin: 0; } .single-post-thumb { margin: 24px 0; border-radius: var(--radius); overflow: hidden; } .single-post-header { margin-bottom: 24px; } / Highlighter marker — [[text]] in the settings screen ========================================================================== The stroke is a pseudo-element that scales from the left, so it sweeps across the words like a marker pen. The text sits above it. ========================================================================== / .marker { position: relative; display: inline; padding: 0 0.14em; / keeps the stroke from being clipped on multi-line text / -webkit-box-decoration-break: clone; box-decoration-break: clone; } .marker::before { content: ""; position: absolute; left: 0; right: 0; / sits over the lower part of the text, like a real highlighter / top: 18%; bottom: 6%; background: var(--color-accent); border-radius: 1px; transform: scaleX(0); transform-origin: left center; transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1); z-index: 0; } .marker-text { position: relative; z-index: 1; } / Drawn once the block scrolls into view … / .reveal.is-visible .marker::before, .is-visible.marker::before { transform: scaleX(1); } / … or, in the hero, once the intro animation has played / html.is-loaded .hero .marker::before { transform: scaleX(1); transition-delay: 0.75s; } / Hero: solid block behind white text, matching the reference look / .hero .marker::before { top: 8%; bottom: 2%; / 水色 — deep enough that the white text on top still reads clearly / background: linear-gradient(100deg, #2ba7e0 0%, #0b86c9 100%); } / * With the intro playing, the stroke holds off until the headline has landed, * so it reads as a pen sweeping over finished text rather than arriving with it. / .hero.has-intro .marker::before, html.is-loaded .hero.has-intro .marker::before { transform: scaleX(0); transition-delay: 0s; } .hero.has-intro.is-done .marker::before, html.is-loaded .hero.has-intro.is-done .marker::before { transform: scaleX(1); transition-delay: 1.45s; } / * In the hero the marked words start the same colour as the rest of the * headline and are painted white from the left, in step with the stroke — so * it reads as one pen stroke knocking the type out, not two separate effects. * The gradient is twice the width of the text and slides across it; clipping it * to the glyphs is what makes the change sweep rather than cross-fade. / / * The marked words start the same colour as the rest of the headline and are * knocked out to white once the stroke has finished passing under them. * * The switch is a hard step (0s duration, timed to land at the end of the * stroke) rather than a fade. A fade puts the type through a grey mid-state * and, worse, turns it white while parts of it are still over bare photo. The * glow goes at the same moment: it is there to hold the type against the * picture, and on a solid block it only smears the letters. / .hero .marker-text { color: inherit; transition: color 0s linear, text-shadow 0.3s ease; } / 0.75s before the stroke starts + 0.85s to draw it / html.is-loaded .hero .marker-text { color: #fff; text-shadow: none; transition-delay: 1.6s; } / Still bare over the photo at this point, so it stays dark and keeps the glow / .hero.has-intro .marker-text, html.is-loaded .hero.has-intro .marker-text { color: inherit; text-shadow: var(--hero-glow); transition-delay: 0s; } / 1.45s + 0.85s / .hero.has-intro.is-done .marker-text, html.is-loaded .hero.has-intro.is-done .marker-text { color: #fff; text-shadow: none; transition-delay: 2.3s; } / Body sections: a translucent stroke so dark text stays readable / .section .marker::before, .message-quote .marker::before { background: rgba(11, 99, 206, 0.22); top: 42%; bottom: 4%; } .section-title .marker::before { background: rgba(11, 99, 206, 0.2); } / Value cards sit on navy, so lift the stroke's contrast / .value-block .marker::before { background: rgba(20, 184, 166, 0.38); } @media (prefers-reduced-motion: reduce) { .marker::before { transform: scaleX(1) !important; transition: none !important; } / The stroke is already drawn, so the knock-out has to be too / .hero .marker-text { color: #fff !important; text-shadow: none !important; transition: none !important; } } / Business detail page (事業詳細ページ) ========================================================================== / .biz-hero { --biz-image: none; position: relative; display: flex; align-items: flex-end; min-height: 60vh; padding: 180px 0 80px; background: var(--color-navy); color: #fff; overflow: hidden; } .biz-hero.has-photo::before { content: ""; position: absolute; inset: 0; background-image: var(--biz-image); background-size: cover; background-position: center; } .biz-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 14, 20, 0.55) 0%, rgba(10, 14, 20, 0.4) 45%, rgba(10, 14, 20, 0.92) 100%); } .biz-hero-inner { position: relative; z-index: 1; } .biz-hero .section-eyebrow { color: rgba(255, 255, 255, 0.9); } .biz-hero .section-eyebrow::before { background: rgba(255, 255, 255, 0.7); } .biz-hero-title { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; margin-bottom: 24px; } .biz-hero-lead { color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; line-height: 2; max-width: 46em; margin-bottom: 0; } .section--biz-body { padding-bottom: 0; } / Feature blocks — image and text alternate sides / .section--biz-points { background: var(--color-bg-alt); } .biz-points { display: flex; flex-direction: column; gap: 72px; } .biz-point { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .biz-point:nth-child(even) .biz-point-media { order: 2; } .biz-point--nophoto { grid-template-columns: 1fr; max-width: var(--container-narrow); } .biz-point-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .biz-point-number { display: block; font-family: var(--font-en); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--color-accent); opacity: 0.28; margin-bottom: 14px; } .biz-point-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; margin-bottom: 16px; } .biz-point-desc { color: var(--color-text-light); margin-bottom: 0; } / Flow / .biz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .biz-step { position: relative; background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius); padding: 32px 28px; } .biz-step-number { display: block; font-family: var(--font-en); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; color: var(--color-accent); margin-bottom: 14px; } .biz-step-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; } .biz-step-desc { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 0; } / FAQ / .section--biz-faq { background: var(--color-bg-alt); } .biz-faq { border-top: 1px solid var(--color-border); } .biz-faq-item { border-bottom: 1px solid var(--color-border); } .biz-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; cursor: pointer; list-style: none; font-weight: 700; color: var(--color-navy); transition: color 0.25s ease; } .biz-faq-item summary::-webkit-details-marker { display: none; } .biz-faq-item summary:hover { color: var(--color-accent-dark); } / Plus sign that becomes a minus when open / .biz-faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; } .biz-faq-icon::before, .biz-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-accent); transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease; } .biz-faq-icon::before { width: 16px; height: 2px; } .biz-faq-icon::after { width: 2px; height: 16px; } .biz-faq-item[open] .biz-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; } .biz-faq-a { padding: 0 4px 28px; color: var(--color-text-light); line-height: 2; } / Closing call to action / .biz-cta { text-align: center; background: var(--color-bg-alt); border-radius: var(--radius); padding: 64px 40px; } .biz-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 14px; } .biz-cta p { color: var(--color-text-light); margin-bottom: 32px; } .biz-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } / Footer ========================================================================== / .site-footer { background: var(--color-navy); color: rgba(255, 255, 255, 0.72); } / CTA band -------------------------------------------------------------------------- / .footer-cta { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; padding: 104px 0 96px; } .footer-cta .section-eyebrow { color: var(--color-teal); } .footer-cta .section-eyebrow::before { background: var(--color-teal); } .footer-cta-title { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 900; line-height: 1.4; letter-spacing: 0.01em; margin-bottom: 24px; } .footer-cta-lead { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; max-width: 34em; margin-bottom: 0; } / Oversized arrow link / .footer-cta-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.28); min-width: 280px; color: #fff; position: relative; transition: border-color 0.4s ease; } .footer-cta-link:hover { opacity: 1; border-top-color: var(--color-teal); } .footer-cta-link-label { font-size: 1.5rem; font-weight: 800; color: #fff; transition: color 0.3s ease; } .footer-cta-link:hover .footer-cta-link-label { color: var(--color-teal); } .footer-cta-link-en { font-family: var(--font-en); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .footer-cta-arrow { display: block; width: 40px; margin-top: 18px; color: rgba(255, 255, 255, 0.8); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease; } .footer-cta-arrow svg { width: 100%; height: auto; display: block; } .footer-cta-link:hover .footer-cta-arrow { transform: translateX(12px); color: var(--color-teal); } / Main footer with oversized background wordmark -------------------------------------------------------------------------- / .footer-main { position: relative; overflow: hidden; } .footer-wordmark { position: absolute; left: 50%; bottom: -0.28em; transform: translateX(-50%); font-family: var(--font-en); font-size: clamp(4rem, 15vw, 13rem); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; line-height: 1; color: rgba(255, 255, 255, 0.04); pointer-events: none; user-select: none; } .footer-main-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding: 80px 0 88px; } .footer-logo-image { height: 64px; width: auto; / beat the global img { max-width: 100% } so the height wins / max-width: none; margin-bottom: 22px; } .footer-logo { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 10px; } .footer-logo-en { font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 24px; } .footer-address { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; font-style: normal; line-height: 1.9; margin: 0; } .footer-nav-label { font-family: var(--font-en); font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 32px; } .footer-menu a { display: block; position: relative; padding: 9px 0 9px 18px; color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; transition: color 0.25s ease, transform 0.25s ease; } .footer-menu a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: rgba(255, 255, 255, 0.35); transition: width 0.25s ease, background-color 0.25s ease; } .footer-menu a:hover { color: #fff; opacity: 1; transform: translateX(4px); } .footer-menu a:hover::before { width: 12px; background: var(--color-teal); } .footer-widget-title { color: #fff; font-size: 0.95rem; } / Bottom bar -------------------------------------------------------------------------- / .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; } .footer-copy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4); margin: 0; } .footer-legal-link { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.25s ease; } .footer-legal-link:hover { color: #fff; } .footer-pagetop { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); transition: color 0.25s ease; } .footer-pagetop:hover { color: #fff; opacity: 1; } .footer-pagetop-arrow { display: block; width: 10px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .footer-pagetop-arrow svg { width: 100%; height: auto; display: block; } .footer-pagetop:hover .footer-pagetop-arrow { transform: translateY(-5px); } / 404 ========================================================================== / .section--404 { text-align: center; padding: 140px 0; } / Utility ========================================================================== / .u-hide-sm { display: inline; } / Responsive ========================================================================== / @media (max-width: 960px) { :root { --section-space: 96px; } .hero-intro-orb { filter: blur(70px); } .container { padding: 0 28px; } / On a 320px handset, 28px a side leaves too little for the headline / @media (max-width: 400px) { .container { padding: 0 20px; } } .business-grid { grid-template-columns: repeat(2, 1fr); } .business-lead { grid-template-columns: 1fr; gap: 36px; margin-bottom: 72px; } .business-lead--reverse .business-lead-media { order: 0; } .mvv-grid, .mvv-grid--2 { grid-template-columns: 1fr; } .value-grid { grid-template-columns: 1fr; } .footer-cta-inner { grid-template-columns: 1fr; gap: 48px; align-items: start; padding: 88px 0 80px; } .footer-main-inner { grid-template-columns: 1fr; gap: 56px; } .message-inner.has-photo { grid-template-columns: 1fr; gap: 40px; } / * Square, not 16:9. A landscape frame on a portrait photo of a person keeps * only a horizontal band of it — combined with the bottom anchoring the base * rule sets, a 16:9 crop of this shot cut the head off entirely and left the * torso. A square still keeps the card from dominating a phone screen while * holding the whole subject. / .message-photo { aspect-ratio: 1 / 1; } .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(2) { grid-column: span 3; aspect-ratio: 4 / 3; } .post-list--home { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 782px) { :root { --section-space: 72px; } .chat-bubble--q { max-width: 100%; font-size: 0.92rem; padding: 13px 18px; } .chat-bubble--q:nth-child(even) { margin-left: 20px; } .chat-bubble--a { max-width: 100%; padding: 20px 24px; } .chat-thread { gap: 11px; } .preloader-mark { width: 132px; height: 132px; } .biz-hero { min-height: 48vh; padding: 140px 0 56px; } .biz-point, .biz-point--nophoto { grid-template-columns: 1fr; gap: 28px; } / Keep the image above the text on narrow screens / .biz-point:nth-child(even) .biz-point-media { order: 0; } .biz-points { gap: 48px; } .biz-cta { padding: 44px 24px; } .site-logo { height: 42px; } .site-header.is-scrolled .site-logo { height: 40px; } .site-title { font-size: 1.1rem; } / Career timeline collapses to a single column with the rail on the left / .career-item { grid-template-columns: 1fr; gap: 10px; padding-left: 28px; padding-bottom: 36px; } .career-item::before { left: 4px; top: 14px; } .career-item::after { left: 0; top: 10px; } .career-year { font-size: 1.2rem; } .career-body { padding-left: 0; } .message-hero { min-height: 56vh; padding: 130px 0 56px; } / One column on a phone: the portrait leads, the copy follows / .message-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .message-hero-text, .message-hero-photo { grid-column: 1; } .message-hero-photo { grid-row: 1; width: 190px; aspect-ratio: 4 / 5; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); } .message-hero-text { grid-row: 2; } .message-quote { padding-left: 24px; } .section--message-body { padding-top: 64px; } .menu-toggle { display: flex; } .hero { min-height: 88vh; padding-bottom: 72px; } .hero-scroll { display: none; } .hero-scroll--compact { display: none; } .recruit-list { grid-template-columns: 1fr; } .business-grid, .business-grid--2 { grid-template-columns: 1fr; } .business-card { min-height: 380px; padding: 32px 26px; } .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(2) { grid-column: span 6; } .post-list--home { grid-template-columns: 1fr; } .mvv-card, .value-block { padding: 32px 24px; } .section--mvv.has-bg::before, .section--overview::before, .section--profile::before, .section--mvv::after, .site-footer::before { background-attachment: scroll; } .main-navigation .primary-menu { position: absolute; top: 88px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 28px 24px; gap: 4px; border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 28px rgba(13, 35, 64, 0.08); display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } / Inside the open drawer links must stay dark even over the hero / body.home .site-header:not(.is-scrolled) .primary-menu > li > a { color: var(--color-text); } .main-navigation .primary-menu > li > a::after { display: none; } .main-navigation .primary-menu > li:last-child > a { margin-left: 0; margin-top: 8px; text-align: center; } .site-header.is-scrolled .primary-menu { top: 68px; } .main-navigation.is-open .primary-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .u-hide-sm { display: none; } .page-container, .page-container--contact { flex-direction: column; } .contact-info { width: 100%; } .post-card { flex-direction: column; } .post-card-thumb { width: 100%; } .footer-cta-inner { padding: 64px 0 56px; } .footer-cta-link { min-width: 0; width: 100%; } .footer-main-inner { padding: 56px 0 64px; gap: 44px; } .footer-logo-image { height: 48px; } .footer-menu { grid-template-columns: 1fr; } .footer-bottom-inner { flex-direction: column-reverse; align-items: flex-start; gap: 18px; padding: 22px 0; } .overview-table th { width: 120px; padding: 16px; } .overview-table td { padding: 16px; } } / ========================================================================== Recruit page Photo-led and kept in motion: a word band under the headline, two rows of photographs passing each other, then numbered blocks that arrive as you reach them. ========================================================================== / .rec-hero { --rec-image: none; position: relative; display: flex; align-items: center; min-height: 92vh; padding: 160px 0 120px; background: var(--color-navy); color: #fff; overflow: hidden; isolation: isolate; } .rec-hero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--rec-image); background-size: cover; background-position: center; opacity: 0.34; transform: scale(1.1); animation: rec-hero-zoom 18s ease-out forwards; } @keyframes rec-hero-zoom { to { transform: scale(1); } } .rec-hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(16, 24, 32, 0.92) 0%, rgba(16, 24, 32, 0.62) 46%, rgba(16, 24, 32, 0.32) 100% ); } / Two soft lights drifting behind the copy / .rec-hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(110px); opacity: 0.5; pointer-events: none; } .rec-hero-glow--1 { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: var(--color-accent); animation: rec-glow-a 16s ease-in-out infinite; } .rec-hero-glow--2 { width: 34vw; height: 34vw; right: -6vw; bottom: -12vw; background: #7c3aed; animation: rec-glow-b 19s ease-in-out infinite; } @keyframes rec-glow-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8vw, 6vw, 0) scale(1.18); } } @keyframes rec-glow-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-9vw, -5vw, 0) scale(1.14); } } .rec-hero-inner { position: relative; z-index: 1; width: 100%; } .rec-hero-eyebrow { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.78rem; font-weight: 600; color: var(--color-teal); margin-bottom: 28px; } .rec-hero-title { / Headings default to navy site-wide, which is invisible on this panel / color: #fff; font-size: clamp(2.1rem, 5.6vw, 4.4rem); font-weight: 900; line-height: 1.34; letter-spacing: 0.02em; margin-bottom: 32px; max-width: 18em; text-shadow: 0 4px 28px rgba(6, 12, 24, 0.5); } .rec-hero-lead { max-width: 40em; font-size: 1.02rem; line-height: 2.1; color: rgba(255, 255, 255, 0.86); margin-bottom: 48px; } .rec-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .rec-hero .btn--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); color: #fff; } .rec-hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--color-navy); } / Word band -------------------------------------------------------------------------- / .word-marquee { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .word-marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; font-family: var(--font-en); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); / The list is printed twice, so sliding exactly half closes the loop / animation: marquee-left 26s linear infinite; } .word-marquee-dot { color: var(--color-teal); font-size: 0.5rem; } @keyframes marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes marquee-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } / Flowing photographs -------------------------------------------------------------------------- / .photo-strip { display: flex; flex-direction: column; gap: 18px; padding: 18px 0; background: var(--color-navy); overflow: hidden; } .photo-strip-row { overflow: hidden; } .photo-strip-track { display: flex; gap: 18px; width: max-content; animation: marquee-left 46s linear infinite; } .photo-strip-row--reverse .photo-strip-track { animation-name: marquee-right; animation-duration: 58s; } .photo-strip-item { display: block; flex: 0 0 auto; width: 320px; height: 210px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.06); } .photo-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); } / Message -------------------------------------------------------------------------- / .rec-message-inner { display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr); gap: 64px; align-items: start; } .rec-message-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; line-height: 1.5; position: sticky; top: 140px; } .rec-message-body p { font-size: 1.02rem; line-height: 2.15; margin-bottom: 1.9em; } .rec-message-body p:last-child { margin-bottom: 0; } .rec-message-body p:first-child { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; line-height: 1.85; color: var(--color-navy); } / Mission / Vision / Value -------------------------------------------------------------------------- / .rec-mvv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 24px; } .rec-mvv-card { position: relative; padding: 56px 48px 52px; background: var(--color-navy); color: #fff; overflow: hidden; isolation: isolate; } .rec-mvv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, rgba(30, 136, 229, 0.5), transparent 62%); opacity: 0; transition: opacity 0.6s ease; } .rec-mvv-card:hover::before { opacity: 1; } .rec-mvv-num { position: absolute; right: 24px; top: 12px; font-family: var(--font-en); font-size: 5.4rem; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.07); } .rec-mvv-key { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; font-weight: 700; color: var(--color-teal); margin-bottom: 22px; } .rec-mvv-title { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 900; line-height: 1.55; margin-bottom: 18px; } .rec-mvv-desc { color: rgba(255, 255, 255, 0.75); font-size: 0.96rem; line-height: 2; margin: 0; } .rec-value { margin-top: 72px; } .rec-value-key { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.74rem; font-weight: 700; color: var(--color-accent); margin-bottom: 32px; } .rec-value-key span { font-family: var(--font-base); letter-spacing: 0.02em; text-transform: none; color: var(--color-navy); font-size: 1.15rem; font-weight: 900; margin-left: 18px; } .rec-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .rec-value-card { position: relative; padding: 44px 36px 40px; background: var(--color-bg-alt); border-top: 3px solid var(--color-accent); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.5s ease; } .rec-value-card:hover { transform: translateY(-8px); background: #fff; } .rec-value-num { display: block; font-family: var(--font-en); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.2em; color: var(--color-accent); margin-bottom: 18px; } .rec-value-card h4 { font-size: 1.18rem; font-weight: 900; line-height: 1.6; margin-bottom: 14px; } .rec-value-card p { color: var(--color-text-light); font-size: 0.94rem; line-height: 2; margin: 0; } / Environment -------------------------------------------------------------------------- / .rec-env-list { display: grid; gap: 4px; } .rec-env-item { display: grid; grid-template-columns: 120px minmax(0, 22em) minmax(0, 1fr); gap: 40px; align-items: start; padding: 48px 40px; background: #fff; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } .rec-env-item:hover { transform: translateX(10px); } .rec-env-num { font-family: var(--font-en); font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--color-accent); opacity: 0.28; } .rec-env-item h3 { font-size: 1.28rem; font-weight: 900; line-height: 1.6; margin: 0; } .rec-env-item p { color: var(--color-text-light); font-size: 0.96rem; line-height: 2.1; margin: 0; } / Closing call to action -------------------------------------------------------------------------- / .rec-cta { position: relative; padding: 128px 0; background: var(--color-navy); color: #fff; overflow: hidden; text-align: center; } .rec-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 110%, rgba(30, 136, 229, 0.5), transparent 70%); } .rec-cta-inner { position: relative; z-index: 1; } .rec-cta-eyebrow { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.74rem; font-weight: 700; color: var(--color-teal); margin-bottom: 24px; } .rec-cta-title { color: #fff; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.5; margin-bottom: 22px; } .rec-cta-lead { max-width: 34em; margin: 0 auto 44px; color: rgba(255, 255, 255, 0.7); font-size: 0.98rem; line-height: 2.1; } @media (max-width: 960px) { .rec-message-inner { grid-template-columns: 1fr; gap: 32px; } .rec-message-title { position: static; } .rec-mvv-grid, .rec-value-grid { grid-template-columns: 1fr; } .rec-env-item { grid-template-columns: 64px 1fr; gap: 20px 24px; padding: 36px 28px; } .rec-env-item p { grid-column: 2; } .photo-strip-item { width: 220px; height: 148px; } } @media (prefers-reduced-motion: reduce) { .rec-hero.has-photo::before, .rec-hero-glow, .word-marquee-track, .photo-strip-track { animation: none !important; } .word-marquee { display: none !important; } } / Recruit hero — decoration and entrance ========================================================================== / .rec-hero-glow--3 { width: 30vw; height: 30vw; left: 38%; bottom: -16vw; background: var(--color-teal); opacity: 0.32; animation: rec-glow-a 23s ease-in-out infinite reverse; } .rec-hero-grid { position: absolute; inset: -8%; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 92px 92px; -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 78%); mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 78%); animation: rec-grid-drift 26s linear infinite; pointer-events: none; } @keyframes rec-grid-drift { to { transform: translate3d(92px, -92px, 0); } } .rec-hero-mark { position: absolute; z-index: 0; color: #fff; opacity: 0.13; pointer-events: none; } .rec-hero-mark--ring, .rec-hero-mark--ring-sm { border: 1px solid currentColor; border-radius: 50%; } .rec-hero-mark--ring { width: 380px; height: 380px; right: 8%; top: 8%; animation: sgeo-orbit 21s linear infinite; } .rec-hero-mark--ring-sm { width: 140px; height: 140px; right: 32%; bottom: 16%; opacity: 0.16; animation: sgeo-pulse 13s ease-in-out infinite; } .rec-hero-mark--square { width: 170px; height: 170px; right: 20%; bottom: 30%; border: 1px solid currentColor; animation: sgeo-spin 18s linear infinite; } .rec-hero-mark--dots { width: 150px; height: 150px; right: 5%; bottom: 8%; background-image: radial-gradient(currentColor 1.5px, transparent 1.6px); background-size: 24px 24px; opacity: 0.18; animation: sgeo-drift 16s ease-in-out infinite reverse; } .rec-hero-mark--plus { width: 30px; height: 30px; right: 44%; top: 18%; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 100% 50%, 50% 100%; background-position: center, center; background-repeat: no-repeat; opacity: 0.4; animation: sgeo-tumble 9s ease-in-out infinite; } .rec-hero-mark--arc { width: 240px; height: 240px; left: 52%; top: 4%; border: 1px solid transparent; border-top-color: currentColor; border-left-color: currentColor; border-radius: 50%; opacity: 0.16; animation: sgeo-spin 24s linear infinite reverse; } / Entrance — each line arrives on its own beat -------------------------------------------------------------------------- / .rec-hero-eyebrow, .rec-hero-title, .rec-hero-lead, .rec-hero-actions { opacity: 0; transform: translateY(36px); } html.is-loaded .rec-hero-eyebrow { animation: rec-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; } html.is-loaded .rec-hero-title { animation: rec-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards; } html.is-loaded .rec-hero-lead { animation: rec-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.66s forwards; } html.is-loaded .rec-hero-actions { animation: rec-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.86s forwards; } @keyframes rec-in { to { opacity: 1; transform: translateY(0); } } / The eyebrow's rule draws itself out from the left / .rec-hero-eyebrow { display: flex; align-items: center; gap: 18px; } .rec-hero-eyebrow::after { content: ""; width: 0; height: 1px; background: var(--color-teal); opacity: 0.7; } html.is-loaded .rec-hero-eyebrow::after { animation: rec-rule 1s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards; } @keyframes rec-rule { to { width: 108px; } } / The word band slides up into place once the copy has landed / .word-marquee { opacity: 0; transform: translateY(24px); } html.is-loaded .word-marquee { animation: rec-in 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards; } / Highlighter in the recruit hero — same treatment as the front page, drawn after the headline has settled. / .rec-hero .marker::before { top: 8%; bottom: 2%; background: linear-gradient(100deg, #2ba7e0 0%, #0b86c9 100%); } .rec-hero .marker-text { color: inherit; transition: color 0s linear; } html.is-loaded .rec-hero .marker::before { transform: scaleX(1); transition-delay: 1.25s; } / Flips only once the stroke has finished passing under it / html.is-loaded .rec-hero .marker-text { color: #fff; transition-delay: 2.1s; } @media (max-width: 780px) { .rec-hero-mark--square, .rec-hero-mark--arc, .rec-hero-mark--ring-sm { display: none; } .rec-hero-mark--ring { width: 240px; height: 240px; } } @media (prefers-reduced-motion: reduce) { .rec-hero-grid, .rec-hero-mark, .rec-hero-eyebrow::after, .word-marquee { animation: none !important; } .rec-hero-eyebrow, .rec-hero-title, .rec-hero-lead, .rec-hero-actions, .word-marquee { animation: none !important; opacity: 1 !important; transform: none !important; } .rec-hero-eyebrow::after { width: 108px; } .rec-hero .marker::before { transform: scaleX(1) !important; } .rec-hero .marker-text { color: #fff !important; } } / Front hero — colour washes and the word band ========================================================================== / / * These sit before ::after in paint order, so the scrim passes over them and * they can never fight the headline for contrast. / .hero-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; } .hero-glow--1 { width: 42vw; height: 42vw; left: -14vw; bottom: -16vw; background: var(--color-accent); opacity: 0.24; animation: rec-glow-a 17s ease-in-out infinite; } .hero-glow--2 { width: 30vw; height: 30vw; left: 22vw; top: -14vw; background: var(--color-teal); opacity: 0.18; animation: rec-glow-b 21s ease-in-out infinite; } / A bright photo needs them barely there / .hero--light .hero-glow--1 { opacity: 0.13; } .hero--light .hero-glow--2 { opacity: 0.09; } / Word band -------------------------------------------------------------------------- / .hero .word-marquee { bottom: 30px; / stop short of the vertical Scroll cue in the corner / right: 120px; } / A phone has no room left once the cue takes its corner / @media (max-width: 640px) { .hero .word-marquee { display: none; } } .hero--light .word-marquee-track { color: rgba(16, 24, 32, 0.4); } .hero--light .word-marquee-dot { color: var(--color-accent); } / With the intro running, the band waits for the flash like the rest of the copy / .hero.has-intro .word-marquee { animation: none; opacity: 0; transform: translateY(24px); } .hero.has-intro.is-done .word-marquee { animation: rec-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards; } / The eyebrow's rule draws itself out -------------------------------------------------------------------------- / .hero-eyebrow::before { width: 0; transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1); } html.is-loaded .hero-eyebrow::before { width: 44px; transition-delay: 0.55s; } .hero.has-intro .hero-eyebrow::before, html.is-loaded .hero.has-intro .hero-eyebrow::before { width: 0; transition-delay: 0s; } .hero.has-intro.is-done .hero-eyebrow::before, html.is-loaded .hero.has-intro.is-done .hero-eyebrow::before { width: 44px; transition-delay: 0.6s; } @media (prefers-reduced-motion: reduce) { .hero-glow { animation: none !important; } .hero .word-marquee { display: none !important; } .hero-eyebrow::before { width: 44px !important; transition: none !important; } } / ========================================================================== 代表挨拶ページ — motion The hero had no entrance at all and the body faded in as one slab. These rules give the page the same vocabulary as the other heroes: slow lights behind the panel, drafting marks, and copy that arrives a line at a time. ========================================================================== / / Lights and marks behind the hero -------------------------------------------------------------------------- / .msg-hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(120px); pointer-events: none; } .msg-hero-glow--1 { width: 40vw; height: 40vw; left: -12vw; top: -14vw; background: var(--color-accent); opacity: 0.34; animation: rec-glow-a 18s ease-in-out infinite; } .msg-hero-glow--2 { width: 30vw; height: 30vw; right: -8vw; bottom: -14vw; background: #7c3aed; opacity: 0.26; animation: rec-glow-b 22s ease-in-out infinite; } .msg-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 72%); animation: geo-grid-drift 38s linear infinite; } .msg-hero-mark { position: absolute; z-index: 0; pointer-events: none; color: #fff; opacity: 0.12; } .msg-hero-mark--ring { width: 300px; height: 300px; right: 6%; top: -110px; border: 1px solid currentColor; border-radius: 50%; animation: geo-float-a 15s ease-in-out infinite; } .msg-hero-mark--square { width: 120px; height: 120px; right: 26%; bottom: 8%; border: 1px solid currentColor; opacity: 0.1; animation: geo-spin-a 24s linear infinite; } .msg-hero-mark--dots { width: 140px; height: 140px; left: 30%; bottom: -40px; background-image: radial-gradient(currentColor 1.4px, transparent 1.5px); background-size: 22px 22px; opacity: 0.16; animation: geo-float-b 13s ease-in-out infinite; } / Keep the copy and the portrait above all of that / .message-hero-inner { z-index: 2; } / Hero entrance -------------------------------------------------------------------------- / .message-hero .section-eyebrow, .message-hero-title, .message-hero-name, .message-hero-photo { opacity: 0; transform: translateY(26px); } .message-hero-photo { / the portrait comes in from its own side rather than straight up / transform: translateX(-34px) scale(0.97); } html.is-loaded .message-hero .section-eyebrow, html.is-loaded .message-hero-title, html.is-loaded .message-hero-name { animation: hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } html.is-loaded .message-hero-photo { animation: msg-photo-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; } html.is-loaded .message-hero-photo { animation-delay: 0.08s; } html.is-loaded .message-hero .section-eyebrow { animation-delay: 0.24s; } html.is-loaded .message-hero-title { animation-delay: 0.38s; } html.is-loaded .message-hero-name { animation-delay: 0.54s; } @keyframes msg-photo-in { to { opacity: 1; transform: translateX(0) scale(1); } } / The rule above the name draws itself out / .message-hero-name { position: relative; } .message-hero-name::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: rgba(255, 255, 255, 0.5); transition: width 1s cubic-bezier(0.65, 0, 0.35, 1) 0.9s; } html.is-loaded .message-hero-name::after { width: 100%; } / Pull quote -------------------------------------------------------------------------- / .message-quote { position: relative; } / An oversized quotation mark that settles in behind the opening line / .message-quote::before { content: "\201C"; position: absolute; left: 6px; top: -0.42em; font-family: var(--font-en); font-size: 5.2rem; line-height: 1; color: var(--color-accent); opacity: 0; transform: translateY(14px) scale(0.8); transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; pointer-events: none; } .reveal.is-visible .message-quote::before { opacity: 0.16; transform: translateY(0) scale(1); } / The accent rule down the left edge grows instead of just appearing / .message-quote { border-left-color: transparent; } .message-quote::after { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 0; background: var(--color-accent); transition: height 0.9s cubic-bezier(0.65, 0, 0.35, 1); } .reveal.is-visible .message-quote::after { height: 100%; } / Signature -------------------------------------------------------------------------- / .message-signature-block { position: relative; padding-top: 26px; } .message-signature-block::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--color-border); transition: width 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; } .message-signature-block.is-visible::before { width: 180px; } / Career timeline — the spine draws down, the dots pop as each entry lands -------------------------------------------------------------------------- */ .career-item::before { transform: scaleY(0); transform-origin: top; transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; } .career-item.is-visible::before { transform: scaleY(1); } .career-item::after { transform: scale(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s; } .career-item.is-visible::after { transform: scale(1); } .career-year { display: inline-block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s; } .career-item:hover .career-year { transform: translateX(4px); } @media (max-width: 782px) { .msg-hero-mark--ring, .msg-hero-mark--square { display: none; } .message-quote::before { font-size: 3.4rem; } } @media (prefers-reduced-motion: reduce) { .msg-hero-glow, .msg-hero-grid, .msg-hero-mark { animation: none !important; } .message-hero .section-eyebrow, .message-hero-title, .message-hero-name, .message-hero-photo { animation: none !important; opacity: 1 !important; transform: none !important; } .message-hero-name::after, .message-signature-block::before { width: 100% !important; transition: none !important; } .message-quote::before { opacity: 0.16 !important; transform: none !important; transition: none !important; } .message-quote::after, .career-item::before { height: 100% !important; transform: none !important; transition: none !important; } .career-item::after { transform: scale(1) !important; transition: none !important; } }