/* ============================================================ Altega合同会社 — site styles Palette & geometry echo the logo: black-dominant, white space, with sparing pale-blue and peach cube accents. Type: Space Grotesk (Latin display/UI) · Inter (Latin body) · Noto Sans JP (all Japanese, via :lang(ja)). ============================================================ */ :root { --ink: #0b0b0c; --ink-2: #2a2b2e; --ink-soft: #56585e; --paper: #ffffff; --paper-2: #f6f7f9; --line: #e6e8ec; --line-2: #d7dade; --blue: #c4ddf6; --blue-deep: #4f8fce; --peach: #fbd7b5; --peach-deep: #e29257; --maxw: 1120px; --gutter: clamp(20px, 5vw, 56px); --radius: 14px; --radius-sm: 10px; --font-display: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif; --font-body: "Inter", "Noto Sans JP", system-ui, sans-serif; --shadow-sm: 0 1px 2px rgba(11, 11, 12, .04), 0 2px 8px rgba(11, 11, 12, .05); --shadow-md: 0 8px 30px rgba(11, 11, 12, .08); --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Japanese gets Noto Sans JP everywhere, slightly looser leading. */ :lang(ja) { font-family: "Noto Sans JP", system-ui, sans-serif; line-height: 1.85; } /* ---------- language visibility (driven by ) ---------- */ html[lang="ja"] .en { display: none; } html[lang="en"] .ja { display: none; } /* ---------- shared layout ---------- */ .section { max-width: var(--maxw); margin-inline: auto; padding: clamp(64px, 10vw, 128px) var(--gutter); } .section--alt { max-width: none; padding-inline: 0; background: var(--paper-2); border-block: 1px solid var(--line); } .section__body { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .kicker { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--ink); display: inline-block; } .section__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); line-height: 1.18; letter-spacing: -.01em; margin: 0; } :lang(ja).section__title, .section__title :lang(ja) { letter-spacing: 0; line-height: 1.45; word-break: keep-all; } /* ---------- buttons ---------- */ .btn { --pad-y: 13px; --pad-x: 22px; font-family: var(--font-display); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 9px; padding: var(--pad-y) var(--pad-x); border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; } .btn--ink { background: var(--ink); color: var(--paper); box-shadow: 0 1px 2px rgba(11,11,12,.18); } .btn--ink:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,11,12,.22); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn--accent { background: var(--peach); color: var(--ink); border-color: var(--peach); box-shadow: 0 1px 2px rgba(11,11,12,.18); } .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(226,146,87,.35); filter: saturate(1.05); } .btn--lg { --pad-y: 17px; --pad-x: 34px; font-size: 16px; } .btn__arrow { transition: transform .2s var(--ease); } .btn--ghost:hover .btn__arrow { transform: translateX(4px); } /* ============================ NAV ============================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(11,11,12,.02); } .nav__inner { max-width: var(--maxw); margin-inline: auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 20px; } .nav__brand { display: flex; align-items: center; gap: 10px; } .nav__mark { width: auto; height: 28px; } .nav__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; } .nav__links { display: flex; gap: 28px; margin-left: 18px; } .nav__links a { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .2s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--ink); transition: width .25s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; } .langtoggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; } .langtoggle__btn { font-family: var(--font-display); font-weight: 600; font-size: 13px; border: none; background: transparent; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .langtoggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); } /* ============================ HERO ============================ */ .hero { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 9vw, 110px) var(--gutter) clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px); align-items: center; } .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 22px; } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 6.4vw, 68px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 26px; } .hero__title :lang(ja) { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.36; letter-spacing: 0; word-break: keep-all; } .hero__lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); max-width: 46ch; margin: 0 0 34px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__art { position: relative; display: flex; justify-content: center; align-items: center; } .hero__art img { width: min(100%, 360px); filter: drop-shadow(0 24px 50px rgba(11,11,12,.12)); animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .hero__art img { animation: none; } } /* ======================= TRUST STRIP ======================= */ .trust { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); } .trust__list { list-style: none; margin: 0; padding: 28px 0; border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust__list li { display: flex; flex-direction: column; gap: 4px; } .trust__k { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.01em; } .trust__v { font-size: 13.5px; color: var(--ink-soft); } /* ====================== 後払い / OFFER ====================== */ .offer { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 96px) var(--gutter); } .offer__inner { max-width: 800px; margin-inline: auto; text-align: center; } .offer__tag { display: inline-block; margin: 0 0 22px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--peach); background: rgba(251, 215, 181, .12); border: 1px solid rgba(251, 215, 181, .3); padding: 8px 16px; border-radius: 999px; } .offer__tag :lang(ja) { letter-spacing: .02em; } .offer__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.6vw, 38px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 20px; } .offer__title :lang(ja) { line-height: 1.4; letter-spacing: 0; word-break: keep-all; } .offer__body { font-size: clamp(15px, 1.5vw, 17px); color: #c9cace; max-width: 60ch; margin: 0 auto 32px; } /* ========================= 進め方 / STEPS ========================= */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: step; } .step { position: relative; } .step__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 16px; } .step:nth-child(3) .step__no { background: var(--peach-deep); } .step__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 8px; } .step__body { margin: 0; font-size: 14.5px; color: var(--ink-soft); } /* section note */ .section__note { margin: 28px 0 0; font-size: 14px; color: var(--ink-soft); } /* ========================= SERVICES ========================= */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 32px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .card__cube { display: block; width: 26px; height: 26px; margin-bottom: 22px; border-radius: 6px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px rgba(11,11,12,.14); } .card__cube--blue { background: var(--blue); } .card__cube--peach { background: var(--peach); } .card__cube--ink { background: var(--ink); box-shadow: none; } .card__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; margin: 0 0 12px; } .card__body { margin: 0; font-size: 15.5px; color: var(--ink-soft); } /* ========================= APPROACH ========================= */ .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .pillar { background: var(--paper-2); padding: 34px 32px; } .pillar__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.005em; line-height: 1.4; margin: 0 0 12px; display: flex; align-items: flex-start; gap: 11px; } .pillar__title::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: 5px; border-radius: 3px; transform: rotate(45deg); background: var(--blue); box-shadow: inset 0 0 0 1px rgba(11,11,12,.12); } .pillar:nth-child(3n+2) .pillar__title::before { background: var(--peach); } .pillar:nth-child(3n) .pillar__title::before { background: var(--ink); box-shadow: none; } .pillar__title :lang(ja) { word-break: keep-all; } .pillar__body { margin: 0; font-size: 15px; color: var(--ink-soft); } /* =========================== TEAM =========================== */ .team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .member { display: flex; gap: 22px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .member__photo { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(140deg, var(--blue) 0%, var(--peach) 100%); position: relative; display: grid; place-items: center; } .member__photo::after { content: attr(data-initials); font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); opacity: .62; } .member__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0 0 4px; } .member__role { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; letter-spacing: .04em; color: var(--blue-deep); text-transform: uppercase; margin: 0 0 14px; } .member__bio { margin: 0; font-size: 15px; color: var(--ink-soft); } /* ========================== CONTACT ========================= */ .contact { background: var(--ink); color: var(--paper); padding: clamp(72px, 11vw, 140px) var(--gutter); } .contact__inner { max-width: 720px; margin-inline: auto; text-align: center; } .contact__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 20px; } .contact__title :lang(ja) { line-height: 1.4; letter-spacing: 0; word-break: keep-all; } .contact__lede { font-size: clamp(16px, 1.6vw, 18px); color: #c9cace; margin: 0 auto 36px; max-width: 48ch; } .contact .btn--ink { background: var(--paper); color: var(--ink); border-color: var(--paper); } .contact .btn--ink:hover { background: var(--blue); border-color: var(--blue); box-shadow: 0 12px 30px rgba(196,221,246,.25); } .contact__addr { font-family: var(--font-display); font-size: 14px; color: #8d8f96; margin: 22px 0 0; letter-spacing: .02em; } /* =========================== FOOTER ========================== */ .footer { background: var(--paper); border-top: 1px solid var(--line); } .footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 44px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; } .footer__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; } .footer__mark { width: auto; height: 26px; } .footer__info { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; justify-content: center; } .footer__info div { display: flex; flex-direction: column; gap: 3px; } .footer__info dt { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0; } .footer__info dd { margin: 0; font-size: 15px; font-weight: 500; } .footer__sub { color: var(--ink-soft); font-weight: 400; font-size: 13px; } .footer__copy { font-family: var(--font-display); font-size: 13.5px; color: var(--ink-soft); margin: 0; text-align: right; white-space: nowrap; } /* ========================= REVEAL anim ========================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* =========================== RESPONSIVE ======================= */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero__art { order: -1; } .hero__art img { width: min(60%, 240px); } .cards { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .team { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 0; } .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding-bottom: 28px; } .step__no { margin-bottom: 0; } .step__title { grid-column: 2; } .step__body { grid-column: 2; } .step:not(:last-child) .step__no::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: 8px; width: 2px; background: var(--line-2); } .trust__list { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .footer__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; } .footer__brand, .footer__info { justify-content: center; } .footer__copy { text-align: center; } } @media (max-width: 640px) { .nav__links { display: none; } .nav__inner { gap: 12px; } .nav__actions { gap: 10px; flex-shrink: 0; } .nav__cta { --pad-x: 16px; --pad-y: 11px; font-size: 14px; } body { font-size: 16px; } /* On phones, let Japanese headings wrap naturally instead of keep-all, which can otherwise overflow narrow screens (notably in Safari). */ .hero__title :lang(ja), .section__title :lang(ja), .offer__title :lang(ja), .contact__title :lang(ja), .pillar__title :lang(ja) { word-break: normal; overflow-wrap: anywhere; } } /* Keep the language switcher from being squeezed (which made 日本語 wrap vertically); hide the wordmark early enough that the bar never crowds. */ .langtoggle { flex-shrink: 0; } .langtoggle__btn { white-space: nowrap; } .nav__cta { flex-shrink: 0; } @media (max-width: 560px) { .nav__wordmark { display: none; } }