@charset "UTF-8"; /* ========================================================= Tokens ========================================================= */ :root { --red: #c80012; --ink: #211715; --dark: #222; --black: #000; --gray-bg: #f4f5f7; --card-border: #a4a4a4; --white: #fff; --gutter: clamp(20px, 5.21vw, 100px); --section-pt: clamp(90px, 16.7vw, 320px); --section-py: clamp(70px, 8.33vw, 160px); --header-h: clamp(64px, 6.25vw, 100px); /* type scale — tracks the 1920px design */ --fs-104: clamp(44px, 5.42vw, 104px); --fs-56: clamp(26px, 2.92vw, 56px); --fs-53: clamp(24px, 2.76vw, 53px); --fs-36: clamp(22px, 1.88vw, 36px); --fs-32: clamp(20px, 1.67vw, 32px); --fs-26: clamp(18px, 1.35vw, 26px); --fs-24: clamp(17px, 1.25vw, 24px); --fs-22: clamp(15px, 1.15vw, 22px); --fs-18: clamp(16px, 0.94vw, 18px); --fs-15: clamp(12px, 0.78vw, 15px); --fs-200: clamp(52px, 10.42vw, 200px); } /* ========================================================= Base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; background: var(--white); color: var(--black); font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* off by default; a phone-width media query turns it back on */ .sp-br { display: none; } /* opposite of .sp-br: on by default, a phone-width media query turns it off */ .pc-br { display: inline; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 0; z-index: 200; padding: 12px 20px; background: var(--red); color: #fff; } .skip-link:focus { top: 0; } /* ========================================================= Loading screen Only rendered when the inline head script has run, so the page is never hidden behind it if JavaScript is unavailable. ========================================================= */ .loader { display: none; } /* .is-fading keeps the overlay rendered after drops .is-loading, so the fade-out can actually play instead of snapping off. */ .is-loading .loader, .loader.is-fading { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--white); /* composite the overlay on its own layer so the fade is a GPU opacity blend, not a per-frame re-raster of the logo artwork */ will-change: opacity; backface-visibility: hidden; } .is-loading { overflow: hidden; } /* The overlay fades as a single plane — fading the logo separately made the logo vanish ahead of the white, which read as a two-step stutter. */ .loader.is-fading { opacity: 0; pointer-events: none; transition: opacity 1s ease; } .loader.is-hidden { display: none; } .loader__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 36px); padding: 0 24px; } .loader__logo { width: clamp(200px, 20vw, 300px); height: auto; animation: loader-logo-in .8s cubic-bezier(.22, .61, .36, 1) both; } .loader__bar { position: relative; width: clamp(160px, 16vw, 240px); height: 2px; background: rgba(33, 23, 21, .12); overflow: hidden; animation: loader-bar-in .6s ease .35s both; } .loader__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width .45s ease; } @keyframes loader-logo-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes loader-bar-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .loader__logo, .loader__bar { animation: none; } .loader.is-fading { transition-duration: .3s; } } :where(a, button):focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } /* ========================================================= Header ========================================================= */ .header { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-left: var(--gutter); transition: background-color .4s ease; } /* --light holds the white bar permanently on the white sub-pages; --plain only darkens the type and waits for the scroll to add the bar */ .header.is-scrolled, .header.header--light { background: rgba(255, 255, 255, .95); box-shadow: 0 1px 14px rgba(0, 0, 0, .1); } .header.is-scrolled .header__list, .header.header--light .header__list, .header.header--plain .header__list { color: var(--ink); } .header.is-scrolled .header__burger-bars, .header.is-scrolled .header__burger-bars::before, .header.is-scrolled .header__burger-bars::after, .header.header--light .header__burger-bars, .header.header--light .header__burger-bars::before, .header.header--light .header__burger-bars::after, .header.header--plain .header__burger-bars, .header.header--plain .header__burger-bars::before, .header.header--plain .header__burger-bars::after { background: var(--ink); } .header.is-scrolled .header__burger[aria-expanded="true"] .header__burger-bars, .header.header--light .header__burger[aria-expanded="true"] .header__burger-bars, .header.header--plain .header__burger[aria-expanded="true"] .header__burger-bars { background: transparent; } /* Keeps the nav readable where the hero footage is bright. Masked away on the left so it does not dull the white wedge behind the logo. */ .header::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 220%; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 58%); mask-image: linear-gradient(to right, transparent 38%, #000 58%); transition: opacity .4s ease; } .header.is-scrolled::before, .header.header--light::before, .header.header--plain::before { opacity: 0; } .header__logo img { width: clamp(150px, 14.95vw, 287px); height: auto; } .header__nav { display: flex; align-items: center; gap: clamp(10px, 1.04vw, 20px); height: 100%; padding-right: clamp(16px, 2.08vw, 40px); } .header__list { display: flex; align-items: center; gap: clamp(16px, 1.77vw, 34px); padding: 10px; font-size: 16px; font-weight: 500; color: var(--white); } .header__list a { position: relative; white-space: nowrap; } .header__list a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s ease; } .header__list a:hover::after { transform: scaleX(1); transform-origin: left; } /* the current page's link stays underlined and picks up the brand red */ .header__list a[aria-current="page"] { color: var(--red); } .header__list a[aria-current="page"]::after { transform: scaleX(1); } /* shared red button — header nav and the Contact CTA */ .btn { display: inline-flex; align-items: center; justify-content: center; width: clamp(96px, 6.25vw, 120px); height: clamp(32px, 2.08vw, 40px); padding: 0 10px; background: var(--red); color: var(--white); font-size: var(--fs-15); white-space: nowrap; border-radius: 5px; transition: background-color .3s ease; } .btn:hover { background: #a3000f; } .header__burger { display: none; } /* ========================================================= Shared: section heading ========================================================= */ .sec-head { display: flex; flex-direction: column; gap: 14px; } .sec-head--center { align-items: center; text-align: center; } .sec-head__en { font-size: var(--fs-104); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--dark); } .sec-head--light .sec-head__en { color: var(--white); } .sec-head__ja { font-size: clamp(40px, 1.77vw, 44px); font-weight: 700; line-height: 1.5; } .sec-head--light .sec-head__ja { color: var(--white); } .sec-head__desc { margin-top: 16px; font-size: var(--fs-18); line-height: 1.6; } .sec-head--light .sec-head__desc { color: var(--white); } /* ========================================================= Shared: "more" link with arrow badge ========================================================= */ .more-link { --ml-w: 6.583em; --ml-x: 5.25em; position: relative; display: inline-flex; align-items: center; width: var(--ml-w); padding: 12px 0; border-bottom: 2px solid var(--ink); font-size: var(--fs-24); font-weight: 500; white-space: nowrap; } .more-link--light { border-bottom-color: var(--white); color: var(--white); } .more-link--bold { font-weight: 700; } .more-link__icon { position: absolute; left: var(--ml-x); top: 0; width: 2.625em; height: 2.625em; transition: transform .3s ease; } .more-link:hover .more-link__icon { transform: translateX(8px); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100vh; min-height: 560px; padding-top: var(--header-h); } /* Wedge sits above the footage but under the copy. The SVG is preserveAspectRatio="none", so it stretches corner to corner. */ .hero__wedge { position: absolute; left: 0; top: 0; z-index: 1; width: 27.92%; /* 536 / 1920 */ height: 42.04%; /* 454 / 1080 */ pointer-events: none; } /* The catch copy is pinned to the viewport while the FV is on screen, then fades out as the FV scrolls away (opacity driven from main.js). */ .hero__inner { position: fixed; left: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: clamp(14px, 1.56vw, 30px); width: 100%; padding: 0 var(--gutter) clamp(30px, 4.17vw, 80px); color: var(--white); pointer-events: none; will-change: opacity, transform; } .hero__inner.is-gone { visibility: hidden; } .hero__catch { font-size: var(--fs-200); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; } .hero__title { font-size: var(--fs-26); font-weight: 700; line-height: 1.5; } /* ========================================================= Business ========================================================= */ /* Company profile — video sticks to the viewport for the height of .fv (this section only), then scrolls away once the section ends. z-index: 0 keeps it from ever painting over later sections. */ .fv { position: relative; z-index: 0; background: var(--black); } .fv__media { display: block; /* inline would add a line-box gap, showing .fv's black bg as a seam */ position: sticky; top: 0; width: 100%; height: 100vh; object-fit: cover; opacity: .5; margin-bottom: calc(-1 * 100vh); pointer-events: none; } /* The darkening ramps in over the section's top padding so there is no hard edge where the FV meets Company profile. */ .business { position: relative; padding-top: clamp(260px, 36vw, 690px); background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .3) clamp(140px, 19vw, 360px), rgba(0, 0, 0, .62) clamp(260px, 36vw, 690px), rgba(0, 0, 0, .62) 100% ); color: var(--white); } .business__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.08vw, 40px); padding: 0 var(--gutter); } .business__row { display: flex; align-items: stretch; justify-content: space-between; gap: clamp(30px, 4.17vw, 80px); padding: clamp(120px, 16.66vw, 320px) var(--gutter) clamp(80px, 8.34vw, 160px); } /* the 03 row keeps a 160px gap before the marquee */ .business__row:has(+ .marquee) { padding-bottom: clamp(80px, 8.34vw, 160px); } .business__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.13vw, 60px); width: 50.7%; padding: clamp(10px, 2.08vw, 40px) 0; } .business__label { display: flex; flex-direction: column; gap: clamp(8px, 1.04vw, 20px); } .business__num { font-size: var(--fs-32); font-weight: 500; line-height: 1.2; } .business__name { font-size: 38px; font-weight: 500; line-height: 1.3; } .business__desc { max-width: 768px; font-size: var(--fs-26); font-weight: 400; line-height: 1.6; } .business__figure { flex: 0 0 auto; align-self: center; width: 46.5%; aspect-ratio: 800 / 675; border-radius: 10px; background-color: #adadad; background-repeat: no-repeat; } /* crops reproduced from the Figma frames */ .business__figure--01 { background-image: url("../img/business-01.webp"); background-size: 110.13% auto; background-position: 0 0; } .business__figure--02 { background-image: url("../img/business-02.webp"); background-size: 119.5% auto; background-position: 100% 0; } .business__figure--03 { background-image: url("../img/business-03.webp"); background-size: 100% auto; background-position: 0 0; } /* ========================================================= Marquee — outlined display type running along the bottom of Company profile. The container is trimmed to the glyph bottom (0.956 of the font size for this face) so the letters sit flush on the section edge rather than being cut off by Our strengths. ========================================================= */ .marquee { --marquee-fs: clamp(56px, 10.63vw, 204px); font-size: var(--marquee-fs); height: calc(var(--marquee-fs) * .956); overflow: hidden; } .marquee__track { display: flex; width: max-content; /* duration is per-line so every marquee travels at the same px/sec */ animation: marquee-scroll var(--marquee-dur, 150s) linear infinite; } .marquee__text { padding-right: .35em; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--white); } .marquee--outline .marquee__text { color: transparent; -webkit-text-stroke: clamp(1px, .104vw, 2px) rgba(255, 255, 255, .55); } .marquee--reverse .marquee__track { animation-direction: reverse; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================= Video band — the footage shows through with no background of its own ========================================================= */ /* slides up behind Our strengths so its rounded bottom corners reveal this dark band rather than the white page behind it */ .band-fv { position: relative; z-index: 0; margin-top: calc(-1 * clamp(16px, 2.08vw, 40px)); background: var(--black); } .band-fv__media { display: block; position: sticky; top: 0; width: 100%; height: 100vh; object-fit: cover; opacity: .5; /* same darkness as the FV */ margin-bottom: calc(-1 * 100vh); pointer-events: none; } .band { position: relative; display: flex; flex-direction: column; gap: clamp(14px, 1.56vw, 30px); padding: clamp(70px, 8.33vw, 160px) 0; } .marquee--band { --marquee-fs: clamp(40px, 7.29vw, 140px); --marquee-dur: 34s; } .marquee--band.marquee--reverse { --marquee-dur: 29s; } .marquee--band .marquee__text { color: transparent; -webkit-text-stroke: clamp(1px, .104vw, 2px) rgba(255, 255, 255, .6); } /* the lower line sits further back */ .marquee--band.marquee--reverse .marquee__text { -webkit-text-stroke-color: rgba(255, 255, 255, .3); } /* ========================================================= Strengths ========================================================= */ .strengths { position: relative; z-index: 1; padding: var(--section-py) 0; background-color: var(--white); border-radius: 0 0 clamp(16px, 2.08vw, 40px) clamp(16px, 2.08vw, 40px); } .strengths__inner { display: flex; align-items: flex-start; justify-content: center; gap: clamp(40px, 8.13vw, 156px); padding: 0 var(--gutter); } .strengths__main { flex: 0 1 870px; min-width: 0; } .strengths__main > .reveal { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.08vw, 40px); } .strengths__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.25vw, 24px) clamp(12px, 1.04vw, 20px); padding-top: clamp(40px, 4.17vw, 80px); } .strength { display: flex; flex-direction: column; gap: 12px; padding: clamp(10px, 1.04vw, 20px); border-radius: 10px; } .strength__figure { width: 100%; aspect-ratio: 344 / 227; border-radius: 10px; background-color: #c5c5c5; background-repeat: no-repeat; background-size: 100% auto; background-position: left top; } .strength__figure--01 { background-image: url("../img/strength-01.webp"); } .strength__figure--02 { background-image: url("../img/strength-02.webp"); } .strength__figure--03 { background-image: url("../img/strength-03.webp"); } .strength__figure--04 { background-image: url("../img/strength-04.webp"); background-position: left 25.2%; } .strength__body { display: flex; flex-direction: column; gap: 10px; text-align: center; } .strength__title { font-size: var(--fs-24); font-weight: 500; line-height: 1.5; } .strength__text { font-size: var(--fs-18); line-height: 1.6; } .strengths__visual { flex: 0 1 700px; align-self: stretch; min-height: clamp(360px, 58.85vw, 1130px); border-radius: 10px; background-color: #aeaeae; background-image: url("../img/strengths-main.webp"); background-repeat: no-repeat; background-size: 129.14% auto; background-position: 0 0; } /* ========================================================= Works ========================================================= */ .works { position: relative; z-index: 1; /* keeps the band's pinned footage from showing through */ padding: var(--section-py) 0; background: var(--gray-bg); overflow: hidden; } .works__inner { display: flex; align-items: flex-start; gap: clamp(40px, 8.33vw, 160px); /* no right gutter — the card row runs off the screen edge, as in the comp */ padding: clamp(0px, 2.08vw, 40px) 0 clamp(0px, 2.08vw, 40px) var(--gutter); } .works__head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.08vw, 40px); } .works__head .sec-head__en { line-height: 1; } .works__slider { flex: 1 1 0; min-width: 0; } .works__track { display: flex; gap: clamp(16px, 1.25vw, 24px); padding: 4px 10px 14px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .works__track::-webkit-scrollbar { display: none; } .work-card { flex: 0 0 clamp(280px, 24.4vw, 469px); display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 1.04vw, 20px); background: var(--white); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 4px 10px 4px rgba(0, 0, 0, .05); scroll-snap-align: start; } .work-card__figure { width: 100%; aspect-ratio: 427 / 284; border-radius: 10px; background-color: #c5c5c5; background-image: url("../img/works-strip.webp"); background-repeat: no-repeat; background-size: 405.85% 203.52%; } .work-card__figure--01 { background-position: 0% 10.2%; } .work-card__figure--02 { background-position: 33.69% 8.5%; } .work-card__figure--03 { background-position: 68.07% 7.48%; } .work-card__title { font-size: var(--fs-24); font-weight: 500; line-height: 1.5; } .work-card__meta { font-size: var(--fs-18); line-height: 1.6; } .works__next { position: absolute; top: 50%; right: 19px; transform: translateY(-50%); width: clamp(56px, 5.16vw, 99px); height: clamp(56px, 5.16vw, 99px); transition: transform .3s ease; } .works__next:hover { transform: translateY(-50%) scale(1.06); } .works__next[disabled] { opacity: .35; cursor: default; } .works__next[disabled]:hover { transform: translateY(-50%); } /* ========================================================= Sub-page: head ========================================================= */ .page-head { padding: calc(var(--header-h) + clamp(70px, 8.33vw, 160px)) var(--gutter) 0; background: var(--white); overflow: hidden; /* the watermark bleeds past both edges */ } .page-head__inner { position: relative; } /* oversized watermark behind the title */ .page-head__ghost { position: absolute; z-index: 0; font-size: clamp(110px, 15.31vw, 294px); font-weight: 700; /* offsets in em so the 294px / -113px / -15px comp ratios hold at any width */ line-height: .354; left: -.384em; top: -.051em; color: #f6f6f6; white-space: nowrap; pointer-events: none; user-select: none; } .page-head .sec-head { position: relative; z-index: 1; } .page-head__rule { height: clamp(70px, 8.33vw, 160px); border-bottom: 1px solid #d9d9d9; } /* ========================================================= Sub-page: president's message ========================================================= */ .message { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.6vw, 50px); padding: clamp(70px, 8.33vw, 160px) var(--gutter); color: var(--dark); } .message__label { font-size: clamp(19px, 1.46vw, 28px); font-weight: 500; line-height: 1.5; } .message__catch { font-size: clamp(24px, 2.08vw, 40px); font-weight: 500; line-height: 1.5; } .message__body { display: flex; flex-direction: column; } .message__body p { font-size: clamp(16px, 1.09vw, 21px); line-height: 2; } .message__sign { display: flex; align-items: center; justify-content: flex-end; gap: 20px; width: 100%; } .message__role { font-size: clamp(13px, 0.83vw, 16px); font-weight: 500; } .message__name { width: clamp(150px, 11.04vw, 212px); height: auto; } /* ========================================================= Sub-page: contact form ========================================================= */ .form-sec { display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 3.13vw, 60px); padding: clamp(60px, 6.25vw, 120px) var(--gutter) clamp(70px, 8.33vw, 160px); color: var(--dark); } .form-sec__lead { font-size: clamp(14px, 0.94vw, 18px); line-height: 1.9; text-align: center; } .form-sec__tel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 720px); padding: clamp(20px, 2.08vw, 40px); background: var(--gray-bg); border-radius: 10px; text-align: center; } .form-sec__tel-label { font-size: clamp(12px, 0.83vw, 16px); font-weight: 500; } .form-sec__tel-num { font-size: clamp(28px, 2.4vw, 46px); font-weight: 900; line-height: 1.2; } .form-sec__tel-note { font-size: clamp(11px, 0.73vw, 14px); color: #6d6d6d; } .form { width: min(100%, 860px); } .form__row { display: flex; align-items: flex-start; gap: clamp(10px, 1.56vw, 30px); padding: clamp(14px, 1.25vw, 24px) 0; border-bottom: 1px solid #d9d9d9; } .form__label { flex: 0 0 clamp(120px, 13.5vw, 220px); display: flex; align-items: center; gap: 10px; padding-top: 12px; font-size: 16px; font-weight: 500; } .form__req { padding: 3px 8px; background: var(--red); color: var(--white); border-radius: 3px; font-size: clamp(10px, 0.63vw, 12px); font-weight: 500; } .form__field { flex: 1 1 0; min-width: 0; } .form__input { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--dark); background: var(--white); border: 1px solid #c9c9c9; border-radius: 5px; transition: border-color .25s ease; } .form__input:focus { border-color: var(--red); outline: 2px solid rgba(200, 0, 18, .18); outline-offset: 1px; } .form__input--area { resize: vertical; line-height: 1.8; min-height: 200px; } /* fields are sized to the content they hold rather than all running full width */ .form__input--sm { max-width: 260px; } .form__input--md { max-width: 380px; } .form__input--lg { max-width: 480px; } .form__input:user-invalid { border-color: var(--red); } .form__consent { padding: clamp(20px, 2.08vw, 40px) 0; text-align: center; } .form__check { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(13px, 0.83vw, 16px); cursor: pointer; } .form__check input { width: 18px; height: 18px; accent-color: var(--red); } .form__check a { text-decoration: underline; text-underline-position: from-font; } .form__submit { display: flex; justify-content: center; } .btn--wide { width: clamp(200px, 15.63vw, 300px); height: clamp(48px, 3.44vw, 66px); font-size: clamp(14px, 0.94vw, 18px); font-weight: 500; } /* the footer alone, on pages that do not repeat the Contact CTA */ /* Standalone footer (contact.html has no CTA heading above it). The section is much shorter here, so "center bottom" only shows the photo's darkest, least detailed strip — reposition higher to keep the scaffolding and workers visible, and lighten the scrim tuned for the taller combined box. */ .contact--footer-only { padding-top: clamp(80px, 10.42vw, 200px); gap: 0; } /* .contact (defined later in this file) also sets background-position and would win on source order alone at equal specificity — the compound selector here is what actually makes the override stick. */ .contact.contact--footer-only { background-position: center 62%; } .contact.contact--footer-only::before { background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)); } /* ========================================================= Sub-page: recruit ========================================================= */ .rec-heading { font-size: clamp(26px, 2.81vw, 54px); font-weight: 700; line-height: 1.4; color: #383838; text-align: center; } .rec-heading--left { width: min(100%, 1174px); text-align: left; } .rec-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(var(--header-h) + clamp(20px, 2.6vw, 100px)) 0 clamp(70px, 8.33vw, 160px); background: linear-gradient(to bottom, #e0e2e4, #f0f0f0); overflow: hidden; } /* outlined logotype running behind the illustration, just under the header */ .rec-hero__marquee { position: absolute; left: 0; top: 66px; z-index: 0; width: 100%; } .rec-hero__marquee--lower { top: calc(66px + var(--marquee-fs) * 1.12); } .marquee--rec { --marquee-fs: clamp(64px, 14.74vw, 283px); --marquee-dur: 46s; height: calc(var(--marquee-fs) * 1.12); } .marquee--rec .marquee__text { font-family: "Oswald", "Zen Kaku Gothic New", sans-serif; font-weight: 400; color: transparent; -webkit-text-stroke: clamp(1px, .104vw, 2px) rgba(255, 255, 255, .9); } .rec-hero__art { position: relative; z-index: 1; width: min(92.08%, 1768px); height: auto; } .rec-hero__lead { position: relative; z-index: 1; } .rec-hero__lead { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 2.08vw, 40px); width: min(92.08%, 1768px); } .rec-hero__sub { flex: 0 1 951px; min-width: 0; height: auto; } .rec-hero__copy { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.08vw, 40px); color: #383838; } .rec-hero__catch { font-size: clamp(26px, 2.81vw, 54px); font-weight: 700; line-height: 1.4; } .rec-hero__text { max-width: 403px; font-size: clamp(14px, 0.94vw, 18px); line-height: 1.8; } /* --- merits --- */ .rec-merit { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.08vw, 40px); padding: clamp(50px, 5.2vw, 100px) 0 clamp(70px, 8.33vw, 160px); background: #f0f0f0; } /* viewport is exactly five cards wide; anything past that is clipped */ .rec-merit { --merit-card-w: clamp(220px, 18.39vw, 353px); --merit-card-h: clamp(320px, 25.16vw, 483px); } .rec-merit__viewport { width: min(100%, calc(var(--merit-card-w) * 5)); margin-inline: auto; /* Plain overflow:hidden clips both axes — setting only overflow-x here would compute overflow-y to "auto" per spec (mixing hidden with visible on the same element is not allowed) and that still clips paint despite no scrollbar appearing. So instead of fighting that, this box is padded taller than a card by exactly the extra height scale(1.1) adds, so the centred card's growth is fully contained and nothing ever needs to be clipped vertically in the first place. */ padding-block: calc(var(--merit-card-h) * .05); overflow: hidden; } .rec-merit__track { display: flex; align-items: center; gap: 0; width: max-content; will-change: transform; transition: transform .8s cubic-bezier(.4, 0, .2, 1); } .merit { position: relative; flex: 0 0 var(--merit-card-w); display: flex; flex-direction: column; justify-content: flex-end; height: var(--merit-card-h); /* side padding is a touch tighter than the comp's 47px so the longest caption still breaks on its intended two lines */ padding: clamp(30px, 2.97vw, 57px) clamp(14px, 1.98vw, 38px); overflow: hidden; color: var(--white); text-align: center; /* cards sit flush; the centred one grows so there is no gap between them */ transform: scale(1); transition: transform .8s cubic-bezier(.4, 0, .2, 1); } .merit.is-active { z-index: 1; transform: scale(1.1); } /* transparent line-art over the flat colour, positioned as in the comp */ .merit__art { position: absolute; opacity: .5; max-width: none; pointer-events: none; } .merit--01 .merit__art { left: -32.44%; top: 6.63%; width: 146.74%; } .merit--02 .merit__art { left: -12.04%; top: 5.39%; width: 124.08%; } .merit--03 .merit__art { left: -175.64%; top: -6.62%; width: 280.88%; } .merit--04 .merit__art { left: -4.11%; top: 4.14%; width: 103.97%; } .merit--05 .merit__art { left: -68.41%; top: 6.63%; width: 249.29%; } .merit--01 { background: #f2cd00; } .merit--02 { background: #0067b1; } .merit--03 { background: #c80012; } .merit--04 { background: #f39800; } .merit--05 { background: #00ad72; } .merit__title, .merit__text { position: relative; } .merit__title { font-weight: 700; line-height: 1.15; } .merit__lg { font-size: clamp(32px, 3.02vw, 58px); } .merit__md { font-size: clamp(27px, 2.5vw, 48px); } .merit__sm { font-size: clamp(21px, 1.98vw, 38px); } .merit__xs { font-size: clamp(15px, 1.41vw, 27px); } .merit__text { margin-top: clamp(8px, 0.83vw, 16px); /* 18px is the largest that keeps every caption on the comp's two lines */ font-size: clamp(11px, 0.94vw, 18px); font-weight: 700; line-height: 1.6; } /* --- interviews --- */ .rec-voice { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.08vw, 40px); padding: 0 var(--gutter) clamp(70px, 8.33vw, 160px); background: #f0f0f0; } .rec-voice__list { display: flex; align-items: flex-start; justify-content: center; gap: clamp(20px, 2.08vw, 40px); } .voice { flex: 0 1 567px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .voice__figure { width: 100%; aspect-ratio: 567 / 617; border-radius: 10px; background-color: #c8c8c8; background-repeat: no-repeat; } /* crops taken straight from the comp's 567x617 frames */ .voice__figure--01 { background-image: url("../img/voice-02.webp"); background-size: 117.6% auto; background-position: 81% 0; } .voice__figure--02 { background-image: url("../img/voice-01.webp"); background-size: 163.1% auto; background-position: 72.1% 0; } .voice__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.04vw, 20px); color: #383838; } .voice__title { font-size: clamp(19px, 1.61vw, 31px); font-weight: 700; line-height: 1.4; } .voice__text { font-size: 16px; line-height: 1.8; } .voice__meta { font-size: clamp(12px, 0.73vw, 14px); line-height: 1.6; } /* --- entry CTA --- */ .rec-cta { display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 4.17vw, 80px); padding: clamp(70px, 8.33vw, 160px) var(--gutter); background: var(--white); } .rec-cta__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 2.08vw, 40px); color: #383838; text-align: center; } .rec-cta__catch { font-size: clamp(24px, 2.81vw, 54px); font-weight: 700; line-height: 1.4; } .rec-cta__text { max-width: 533px; font-size: clamp(14px, 0.94vw, 18px); line-height: 1.8; } .rec-cta__actions { display: flex; align-items: stretch; width: 100%; } .rec-cta__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: clamp(150px, 13.02vw, 250px); transition: background-color .3s ease, color .3s ease; } /* both halves stay equal at every width */ .rec-cta__btn--check, .rec-cta__btn--entry { flex: 1 1 50%; min-width: 0; } .rec-cta__btn--check { border: 3px solid var(--red); background: var(--white); color: #383838; } .rec-cta__btn--check:hover { background: #fff5f6; } .rec-cta__btn--entry { background: var(--red); color: var(--white); } .rec-cta__btn--entry:hover { background: #a3000f; } .rec-cta__label { font-size: clamp(14px, 1.04vw, 20px); font-weight: 500; } .rec-cta__en { font-size: clamp(38px, 4.17vw, 80px); font-weight: 900; line-height: 1; } /* ========================================================= Sub-page: works list ========================================================= */ .works-list { padding: clamp(70px, 8.33vw, 160px) var(--gutter); } .works-list__inner { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 1.04vw, 20px); } .works-tags { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; width: clamp(120px, 8.6vw, 165px); font-size: clamp(13px, 0.83vw, 16px); font-weight: 500; color: #9d9d9d; } .works-tags__btn { padding: 0; font: inherit; color: inherit; text-align: left; white-space: nowrap; transition: color .25s ease; } .works-tags__btn:hover { color: var(--dark); } .works-tags__btn.is-active { color: var(--red); } .works-empty { padding: clamp(30px, 4.17vw, 80px) 0; font-size: clamp(13px, 0.83vw, 16px); color: #9d9d9d; } .works-list__main { flex: 0 1 auto; min-width: 0; } .works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, clamp(240px, 19.95vw, 383px))); gap: clamp(30px, 4.17vw, 80px) clamp(16px, 1.04vw, 20px); } .work { display: flex; flex-direction: column; overflow: hidden; background: #f3f3f3; border-radius: 10px; } /* display:flex above would otherwise beat the [hidden] default */ .work[hidden] { display: none; } .work__figure { width: 100%; aspect-ratio: 383 / 237; background-color: #dfdfdf; background-repeat: no-repeat; } /* crops reproduced from the comp's 383x237 frames */ .work__figure--01 { background-image: url("../img/works-01.webp"); background-size: 97.4% auto; background-position: 0% 100%; } .work__figure--02 { background-image: url("../img/works-02.webp"); background-size: 102.1% auto; background-position: 50% 28.6%; } .work__figure--03 { background-image: url("../img/works-03.webp"); background-size: auto 100%; background-position: 0% 0%; } .work__figure--04 { background-image: url("../img/works-04.webp"); background-size: 100% auto; background-position: 0% 13%; } .work__figure--05 { background-image: url("../img/works-05.webp"); background-size: 103.9% auto; background-position: 100% 36.1%; } .work__figure--06 { background-image: url("../img/works-06.webp"); background-size: 100% auto; background-position: 0% 15.3%; } .work__figure--07 { background-image: url("../img/works-07.webp"); background-size: 100% auto; background-position: 0% 6.9%; } .work__figure--08 { background-image: url("../img/works-08.webp"); background-size: 100% auto; background-position: 0% 17.2%; } .work__figure--09 { background-image: url("../img/works-09.webp"); background-size: 100% auto; background-position: 0% 23%; } .work__body { display: flex; flex-direction: column; padding: clamp(18px, 1.3vw, 25px) clamp(18px, 1.3vw, 25px) clamp(30px, 2.6vw, 50px); font-size: clamp(13px, 0.83vw, 16px); font-weight: 500; line-height: 1.7; color: var(--black); } .work__tag { margin-top: 16px; font-size: clamp(12px, 0.73vw, 14px); color: #9d9d9d; } /* ========================================================= Sub-page: business ========================================================= */ .biz-intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.04vw, 20px); padding: clamp(70px, 8.33vw, 160px) var(--gutter); color: var(--dark); } .biz-intro__label { font-size: clamp(20px, 1.51vw, 29px); font-weight: 500; line-height: 1.5; } .biz-intro__text { font-size: clamp(16px, 1.09vw, 21px); line-height: 2; } .biz { padding: clamp(40px, 4.17vw, 80px) 0; background: #383838; } .biz-item { padding: 0 clamp(20px, 20.83vw, 400px) clamp(70px, 8.33vw, 160px); } .biz-item__inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.08vw, 40px); } .biz-item__num { font-size: clamp(30px, 2.6vw, 50px); font-weight: 500; line-height: 1.3; color: var(--white); } .biz-item__name { font-size: clamp(21px, 1.56vw, 30px); font-weight: 700; line-height: 1.5; color: var(--white); } .biz-item__text { color: var(--white); } .biz-item__text p { font-size: 16px; line-height: 2; } .biz-item__figure { width: 100%; height: clamp(200px, 27.4vw, 526px); border-radius: 10px; background-color: #e5e5e5; background-repeat: no-repeat; } /* crops reproduced from the comp */ .biz-item__figure--01 { background-image: url("../img/business-detail-01.webp"); background-size: 100% auto; background-position: 0 0; } .biz-item__figure--02 { background-image: url("../img/business-detail-02.webp"); background-size: 100% auto; background-position: left 14.3%; } .biz-item__figure--03 { background-image: url("../img/business-detail-03.webp"); background-size: 111.96% auto; background-position: 0 39.6%; } .biz-note { display: flex; flex-direction: column; gap: clamp(12px, 1.04vw, 20px); width: 100%; padding: clamp(18px, 1.56vw, 30px); background: #f2f2f2; border-radius: 10px; } .biz-note__title { padding-bottom: 8px; border-bottom: 1px solid #e3e3e3; font-size: clamp(15px, 0.94vw, 18px); font-weight: 500; color: var(--black); } .biz-note__list { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 2.08vw, 40px); } .biz-note__list li { display: flex; align-items: center; gap: 10px; font-size: clamp(12px, 0.73vw, 14px); line-height: 1.6; color: var(--black); } .biz-note__list li::before { content: ""; flex: 0 0 auto; width: 14px; height: 12px; background: url("../icon/check.png") center / contain no-repeat; } /* ========================================================= Sub-page: outline table / access — shared heading pair ========================================================= */ .spec__en { font-size: clamp(30px, 2.6vw, 50px); font-weight: 500; line-height: 1.3; color: var(--dark); } .spec__ja { font-size: clamp(13px, 0.83vw, 16px); font-weight: 500; line-height: 1.8; color: var(--dark); } .spec { padding: 0 var(--gutter) clamp(70px, 8.33vw, 160px); } .spec__inner { display: flex; align-items: flex-start; gap: clamp(30px, 3.13vw, 60px); } .spec__head { flex: 0 0 clamp(200px, 36.2vw, 695px); } .spec__list { flex: 1 1 0; min-width: 0; } .spec__row { display: flex; align-items: stretch; gap: 10px; border-bottom: 1px solid #d9d9d9; } .spec__row dt, .spec__row dd { display: flex; align-items: center; min-height: clamp(46px, 3.07vw, 59px); padding: 10px; margin: 0; font-size: 16px; line-height: 1.8; color: var(--dark); } .spec__row dt { flex: 0 0 clamp(96px, 10.42vw, 200px); font-weight: 500; } .spec__row dd { flex: 1 1 0; min-width: 0; } .spec__row dd a { text-decoration: underline; text-underline-position: from-font; } /* ========================================================= Sub-page: access ========================================================= */ .access { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.08vw, 40px); padding: 0 var(--gutter) clamp(70px, 8.33vw, 160px); } .access__body { width: 100%; } .access__address { padding-bottom: 20px; font-size: 16px; line-height: 1.6; color: var(--dark); } .access__map { display: block; width: 100%; aspect-ratio: 1720 / 480; min-height: 220px; border: 0; background: #e5e5e5; /* shows while the embed loads */ } /* ========================================================= Brand marquee band ========================================================= */ .brand-band { position: relative; z-index: 1; padding: clamp(60px, 6.25vw, 120px) 0; background: var(--white); } .marquee--brand { --marquee-fs: clamp(28px, 3.65vw, 70px); --marquee-dur: 40s; /* taller than the shared baseline trim so the descender on "g" survives */ height: calc(var(--marquee-fs) * 1.3); } .marquee--brand .marquee__text { color: #cfcfcf; font-weight: 900; /* Black — the heaviest weight loaded for this face */ word-spacing: .4em; } /* ========================================================= Recruit ========================================================= */ .recruit { position: relative; /* 1 covers the band's overhanging video; 2 keeps the photos that drop out of this section on top of the brand band below it */ z-index: 2; padding: clamp(50px, 4.17vw, 80px) 0 var(--section-py); /* the photos drop out of the dark block into this gap, as in the comp */ margin-bottom: clamp(20px, 2.97vw, 57px); background: var(--dark); } .recruit__inner { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(12px, 1.5vw, 24px); padding: 0 var(--gutter); } /* z-index lifts the copy above the photos so it overlaps them, as designed */ .recruit__body { position: relative; z-index: 2; flex: 0 0 30%; min-width: 0; /* let the catch copy overflow the column onto the photos */ display: flex; flex-direction: column; gap: 10px; } .recruit__message { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 1.25vw, 24px); width: max-content; padding: clamp(28px, 4.17vw, 80px) 0 0 clamp(0px, 4.17vw, 80px); } .recruit__catch { font-size: var(--fs-53); font-weight: 500; line-height: 1.5; color: var(--white); word-break: keep-all; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); } .recruit__visual { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; /* pulls the photos past the section's bottom padding and 56px beyond it */ margin-bottom: calc(-1 * (var(--section-py) + clamp(20px, 2.92vw, 56px))); } .recruit__photo { flex: 1 1 0; min-width: 0; aspect-ratio: 581 / 698; border-radius: 10px; background-color: #aeaeae; background-repeat: no-repeat; } .recruit__photo--01 { background-image: url("../img/recruit-01.webp"); background-size: 304.9% auto; background-position: 62.03% 0; } .recruit__photo--02 { background-image: url("../img/recruit-02.webp"); background-size: 247.33% auto; background-position: 66.71% 1.58%; } /* ========================================================= Contact + Footer ========================================================= */ .contact { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--section-py); padding: var(--section-pt) 0 var(--section-py); /* Per the comp the photo is bottom-anchored, leaving its white sky as deliberate breathing room at the top. The white background-color blends into that sky, so the seam is invisible at any viewport size. */ background-color: var(--white); background-image: url("../img/contact-bg02.webp"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; overflow: hidden; } /* Scrim stays off the white margin and only firms up the rock lower down, where the white copy actually sits. */ .contact::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, .08) 34%, rgba(0, 0, 0, .5) 78%, rgba(0, 0, 0, .55) 100% ); } .contact > * { position: relative; } .contact__inner { display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter); text-align: center; } .contact__text { margin: clamp(20px, 2.08vw, 40px) 0 clamp(36px, 4.17vw, 80px); font-size: var(--fs-18); font-weight: 500; color: var(--white); } /* the CTA on the dark footer needs more presence than the header button */ .contact .btn { /* fixed width left "お問い合わせフォーム" hugging the edges with almost no side padding — size to content plus real padding instead, with the old clamp as a floor so short labels don't shrink the button down */ width: auto; min-width: clamp(180px, 13.02vw, 250px); height: clamp(48px, 3.44vw, 66px); padding-inline: clamp(20px, 2.08vw, 32px); font-size: var(--fs-18); font-weight: 500; } .footer { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(30px, 4.17vw, 80px); width: min(100%, 1648px); padding: 10px var(--gutter); color: var(--white); } .footer__brand { display: flex; flex-direction: column; gap: clamp(12px, 1.04vw, 20px); } .footer__logo { width: clamp(180px, 14.95vw, 287px); height: auto; padding: clamp(10px, 1.04vw, 20px) clamp(14px, 1.46vw, 28px); background: var(--white); border-radius: 6px; } .footer__address { font-size: var(--fs-18); line-height: 1.6; } .footer__navs { display: flex; gap: clamp(30px, 4.17vw, 80px); } .footer__nav { display: flex; flex-direction: column; gap: clamp(10px, 1.04vw, 20px); text-align: right; } .footer__nav-title { font-size: var(--fs-18); font-weight: 500; } .footer__nav ul { display: flex; flex-direction: column; gap: clamp(10px, 1.04vw, 20px); } .footer__nav a { font-size: var(--fs-18); text-decoration: none; } .footer__nav a:hover { text-decoration: underline; text-underline-position: from-font; } .footer__nav a:hover { text-decoration-thickness: 2px; } /* ========================================================= Scroll reveal ========================================================= */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1200px) { .strengths__inner { flex-direction: column; align-items: stretch; } .strengths__visual { flex: none; width: 100%; min-height: 60vw; background-size: cover; background-position: center; display: none;} .works__inner { flex-direction: column; } .works__slider { width: 100%; } .works__next { top: auto; bottom: clamp(30px, 4vw, 60px); transform: none; } .works__next:hover { transform: scale(1.06); } .recruit__inner { flex-direction: column; } .recruit__visual { width: 100%; } .recruit__body { flex: 0 0 auto; width: 100%; } .recruit__message { width: auto; padding-left: 0; } .recruit__visual { margin-bottom: calc(-1 * (var(--section-py) + 24px)); } } @media (max-width: 900px) { .header__burger { display: grid; place-items: center; width: var(--header-h); height: var(--header-h); margin-left: auto; } .header__burger-bars, .header__burger-bars::before, .header__burger-bars::after { display: block; width: 26px; height: 2px; background: var(--white); transition: transform .3s ease, opacity .3s ease; } .header__burger-bars { position: relative; } .header__burger-bars::before, .header__burger-bars::after { content: ""; position: absolute; left: 0; } .header__burger-bars::before { top: -8px; } .header__burger-bars::after { top: 8px; } .header__burger[aria-expanded="true"] .header__burger-bars { background: transparent; } .header__burger[aria-expanded="true"] .header__burger-bars::before { transform: translateY(8px) rotate(45deg); } .header__burger[aria-expanded="true"] .header__burger-bars::after { transform: translateY(-8px) rotate(-45deg); } .header__nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 40px; height: 100dvh; background: rgba(0, 0, 0, .96); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .header__nav.is-open { opacity: 1; visibility: visible; } .header__list { flex-direction: column; gap: 28px; font-size: 20px; } .header__contact { width: 240px; height: 60px; border-radius: 5px; font-size: 18px; } /* the overlay is dark on every page, so --light / --plain must not win here */ .header .header__list, .header.is-scrolled .header__list, .header.header--light .header__list, .header.header--plain .header__list { color: var(--white); } /* 1 + 6. the recruit hero art and the business column use the page gutter */ .rec-hero__sub { flex: 0 0 auto; width: min(100%, 520px); } .biz-item { padding: 0 var(--gutter) clamp(70px, 8.33vw, 160px); } .business__row { flex-direction: column; align-items: stretch; } .business__body, .business__figure { width: 100%; } .strengths__list { grid-template-columns: minmax(0, 1fr); } .spec__inner { flex-direction: column; gap: clamp(20px, 3vw, 36px); } .spec__head { flex: 0 0 auto; } .spec__list { width: 100%; } /* the comp's exact crops only hold at desktop proportions */ .biz-item__figure { background-size: cover !important; background-position: center !important; } /* centring this one crops the worker's face out of frame — it sits in the top fifth of the source photo */ .biz-item__figure--02 { background-position: 58% 14% !important; } .rec-hero__lead { flex-direction: column; align-items: center; } .rec-hero__copy { align-items: center; text-align: center; } .rec-voice__list { flex-direction: column; align-items: stretch; } .voice { flex: 0 0 auto; } /* This section is tall enough on a phone (heading + CTA + footer) that "cover" sizing needs no vertical crop at all — the whole photo, sky included, fits the box, so the white sky sits right behind the "Contact / お問い合わせ" heading. Forcing a taller size creates the crop room needed to push the sky out of frame. */ .contact:not(.contact--footer-only) { background-size: auto 200%; background-position: center bottom; } /* stacked rows must stretch: the row's align-items: flex-start otherwise shrinks each field to its placeholder width */ .form__row { flex-direction: column; align-items: stretch; gap: 6px; } .form__label { flex: 0 0 auto; padding-top: 0; } .form__field { width: 100%; } .form__input { max-width: none; } .works-list__inner { flex-direction: column; align-items: stretch; gap: clamp(20px, 3vw, 36px); } .works-tags { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; width: auto; } .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer { flex-direction: column; } .footer__navs { width: 100%; justify-content: space-between; } .footer__nav { text-align: left; } } @media (max-width: 600px) { .hero { height: 100svh; } /* a
that only breaks the line on phones (br{display:none} suppresses the break entirely; only this width turns it back on) */ .sp-br { display: inline; } .pc-br { display: none; } /* 3. the wedge has to clear the whole logo at phone widths */ .hero__wedge { width: 86%; height: 34%; } /* the CTA row hugs the arrow link below it without this */ .recruit__message { padding-bottom: 28px; } .business__name { font-size: 24px; } /* the phone hero art is its own portrait crop */ .rec-hero__art { width: min(100%, 402px); } /* 5. the tall side photo is dead weight on a phone */ .strengths__visual { display: none; } /* 2. entry buttons stack. Resetting flex is required: once the row turns into a column, flex: 1 1 50% collapses the buttons to content height and the fixed height never applies, leaving the type against the bottom edge. */ .rec-cta__actions { flex-direction: column; gap: 16px; } .rec-cta__btn--check, .rec-cta__btn--entry { flex: 0 0 auto; } .rec-cta__btn { height: auto; padding: 30px 20px; } /* 7. the spec rows need the label and value on separate lines, otherwise the rule collides with the wrapped text */ /* flex: 1 1 0 on dd is meant for the desktop row layout; once the row becomes a column that same rule reads as a vertical flex-basis of 0, and with min-height: 0 it collapses dd's box and the text renders on top of dt instead of below it. Force it to size by content instead. */ .spec__row { flex-direction: column; gap: 0; padding-bottom: 10px; } .spec__row dt { flex: 0 0 auto; min-height: 0; padding: 10px 10px 0; } .spec__row dd { flex: 0 0 auto; min-height: 0; padding: 2px 10px 6px; } .works-grid { grid-template-columns: minmax(0, 1fr); } /* the two photos stay side by side, as on desktop */ .recruit__photo { min-width: 0; } .biz-item { padding-left: 20px; padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .fv__media { display: none; } .marquee__track { animation: none; } }