/* ========================================================================== Arcelis LLC — corporate site stylesheet Converted from a component-based design source into plain CSS. ========================================================================== */ :root{ --paper: oklch(98% 0.014 85); --surface: oklch(95.5% 0.022 80); --surface-deep: oklch(90% 0.028 75); --ink: oklch(34% 0.03 50); --ink-soft: oklch(56% 0.024 50); --line: oklch(34% 0.03 50 / 0.09); --sage: oklch(70% 0.11 148); --sage-deep: oklch(55% 0.1 148); --sage-soft: oklch(94% 0.045 148); --peach: oklch(77% 0.13 48); --peach-deep: oklch(63% 0.13 44); --peach-soft: oklch(94% 0.05 48); --white: oklch(99.5% 0.004 85); --num-peach: oklch(77% 0.06 48); --num-sage: oklch(75% 0.05 148); --num-peach-lg: oklch(77% 0.06 48); --num-sage-lg: oklch(75% 0.05 148); } *, *::before, *::after{ box-sizing:border-box; } /* Elements that set their own `display` (flex, grid, ...) via a class would otherwise ignore the native `hidden` attribute, since author rules always win over the UA stylesheet. Force it explicitly. */ [hidden]{ display:none !important; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:'Noto Sans JP', sans-serif; font-weight:400; color:var(--ink); background:var(--paper); } img{ max-width:100%; display:block; } a{ color:inherit; } em{ font-family:'Murecho', sans-serif; font-weight:500; font-style:normal; color:var(--sage-deep); } input::placeholder, textarea::placeholder{ color:var(--ink-soft); opacity:0.55; } @keyframes arc-menu-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } } /* ============ shared bits ============ */ .eyebrow{ font-family:'Murecho',sans-serif; font-weight:500; font-size:13.5px; color:var(--sage-deep); letter-spacing:0.03em; margin-bottom:18px; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family:'Noto Sans JP',sans-serif; font-size:15.5px; font-weight:600; letter-spacing:0.01em; padding:16px 34px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; transition:transform .25s ease, background .25s ease; } .btn .arrow{ display:inline-block; transition:transform .25s ease; } .btn:hover .arrow{ transform:translateX(4px); } .btn-sage{ background:var(--sage); color:var(--white); box-shadow:0 10px 24px -14px oklch(45% 0.08 150 / 0.6); } .btn-sage:hover{ background:var(--sage-deep); transform:translateY(-2px); } .btn-peach{ background:var(--peach); color:var(--white); box-shadow:0 10px 22px -14px oklch(60% 0.12 48 / 0.55); } .btn-peach:hover{ background:var(--peach-deep); transform:translateY(-2px); } .btn-outline{ font-size:15px; padding:16px 30px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; transition:all .25s ease; } .btn-outline:hover{ background:var(--surface); border-color:var(--ink-soft); } .link-arrow{ background:none; border:none; cursor:pointer; color:var(--ink); font-weight:600; font-size:14.5px; padding:0; padding-bottom:3px; border-bottom:1.5px solid var(--peach); text-decoration:none; display:inline-block; font-family:'Noto Sans JP',sans-serif; } .link-arrow.sage{ border-bottom-color:var(--sage); } /* Reveal-on-scroll: only takes effect once JS confirms it's running (html.js, set by an inline script in ) so that content never stays invisible for users without JavaScript. */ html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } html.js .reveal.is-visible{ opacity:1; transform:translateY(0); } .photo-slot{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.9; padding:24px; white-space:pre-line; background:linear-gradient(135deg, var(--surface), var(--surface-deep)); border:1px dashed var(--line); } /* Once a placeholder is swapped for a real photo, this fills the frame (hero-visual / moment .photo-frame / contact-info .photo-frame). */ .hero-visual img, .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; } /* ============ header / nav ============ */ .site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:26px 6vw; background:oklch(97.4% 0.012 85 / 0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .logo-link{ display:flex; align-items:baseline; gap:8px; background:none; border:none; cursor:pointer; padding:0; text-decoration:none; } .logo-en{ font-family:'Murecho',sans-serif; font-weight:500; font-size:19px; letter-spacing:0.03em; color:var(--ink); } .logo-jp{ font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:12px; color:var(--ink-soft); letter-spacing:0.02em; } .nav-desktop{ display:flex; gap:8px; } .nav-desktop a{ background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'Noto Sans JP',sans-serif; font-size:14px; letter-spacing:0.01em; color:var(--ink-soft); padding:8px 4px; text-decoration:none; transition:color .2s ease, border-color .2s ease; } .nav-desktop a:hover{ color:var(--ink); } .nav-desktop a.is-active{ color:var(--ink); border-bottom-color:var(--sage); } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; } .nav-toggle span{ width:22px; height:1.5px; background:var(--ink); display:block; } .mobile-menu{ position:fixed; inset:0; z-index:60; background:var(--paper); display:flex; flex-direction:column; padding:26px 6vw; animation:arc-menu-in .25s ease; } .mobile-menu[hidden]{ display:none; } .mobile-menu-top{ display:flex; justify-content:flex-end; margin-bottom:40px; } .mobile-menu-close{ background:none; border:none; font-size:15px; color:var(--ink-soft); cursor:pointer; padding:8px; } .mobile-menu nav{ display:flex; flex-direction:column; } .mobile-menu nav a{ text-align:left; background:none; border:none; padding:20px 4px; font-size:20px; font-family:'Murecho',sans-serif; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); text-decoration:none; } @media (max-width:800px){ .nav-desktop{ display:none; } .nav-toggle{ display:flex; } } main{ flex:1; } /* ============ hero (TOP) ============ */ .hero{ display:flex; align-items:center; justify-content:space-between; gap:6vw; padding:min(14vw,150px) 6vw min(11vw,120px); max-width:1320px; margin:0 auto; } .hero-text{ flex:1 1 500px; min-width:300px; max-width:620px; width:100%; } .hero-text h1{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(34px,4.6vw,54px); line-height:1.5; letter-spacing:0.01em; margin:0; white-space:nowrap; } .hero-lead{ font-size:15.5px; line-height:2.15; color:var(--ink-soft); max-width:480px; margin:32px 0 0; } .hero-pill{ display:inline-flex; align-items:center; gap:12px; padding:13px 24px; margin:36px 0 44px; border-radius:999px; background:var(--surface); font-family:'Murecho',sans-serif; font-weight:500; font-size:14px; color:var(--ink); } .hero-pill .x{ color:var(--peach-deep); font-weight:600; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero-visual{ flex:0 0 380px; max-width:38vw; min-width:260px; aspect-ratio:3/4; border-radius:36px 12px 36px 12px; overflow:hidden; } @media (max-width:800px){ .hero{ flex-direction:column; align-items:flex-start; padding-top:56px; } .hero-text h1{ white-space:normal; } .hero-visual{ flex:1 1 auto; max-width:100%; } } /* ============ service intro (TOP) ============ */ .service-intro{ padding:min(10vw,96px) 6vw 0; max-width:1200px; margin:0 auto; } .service-intro h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); line-height:1.7; margin:0; } .service-list{ border-top:1px solid var(--line); margin-top:56px; } .service-row{ display:grid; grid-template-columns:180px 1fr; gap:40px; padding:52px 0; border-bottom:1px solid var(--line); align-items:start; } .service-row .num{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(64px,7vw,96px); line-height:1; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; } .service-row.sales .num{ color:var(--num-peach); } .service-row.accounting .num{ color:var(--num-sage); } .service-row h3{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.4vw,25px); margin:0 0 16px; } .service-row p{ color:var(--ink-soft); line-height:2; max-width:560px; margin:0 0 20px; font-size:15px; } @media (max-width:800px){ .service-row{ grid-template-columns:1fr; gap:14px; } } /* ============ moment photo ============ */ .moment{ padding:min(9vw,88px) 6vw; max-width:1200px; margin:0 auto; } .moment .photo-frame{ width:100%; aspect-ratio:21/9; border-radius:30px; overflow:hidden; } /* ============ why (TOP) ============ */ .why{ background:var(--surface); padding:min(11vw,110px) 6vw; } .why-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:40px; } .why-head h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); line-height:1.7; margin:0 0 24px; } .why-list{ display:flex; flex-direction:column; } .why-item{ display:flex; align-items:baseline; gap:30px; padding:28px 0; border-top:1px solid var(--line); } .why-item:last-child{ border-bottom:1px solid var(--line); } .why-item .tag{ flex:0 0 46px; font-family:'Murecho',sans-serif; font-weight:500; font-size:16px; color:var(--peach-deep); } .why-item p{ margin:0; color:var(--ink-soft); line-height:1.95; font-size:15.5px; } @media (max-width:800px){ .why-grid{ grid-template-columns:1fr; } } /* ============ CTA (TOP) ============ */ .cta-section{ padding:min(9vw,88px) 6vw min(11vw,110px); max-width:1200px; margin:0 auto; } .cta-box{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:min(6vw,64px); border-radius:32px; background:linear-gradient(135deg, var(--sage-soft), var(--peach-soft)); } .cta-box h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); line-height:1.7; margin:0 0 20px; } .cta-box p{ color:var(--ink-soft); margin:0; font-size:15px; line-height:1.95; } @media (max-width:800px){ .cta-box{ grid-template-columns:1fr; } } /* ============ generic page intro (About / Service / Contact) ============ */ .page-intro{ padding:min(10vw,100px) 6vw 20px; max-width:900px; margin:0 auto; } .page-intro h1{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(36px,5vw,58px); line-height:1.45; margin:0; } .page-intro h1.has-lead{ margin-bottom:28px; } .page-intro p{ font-size:15.5px; line-height:2.1; color:var(--ink-soft); max-width:560px; margin:0; } /* ============ story (About) ============ */ .story{ padding:min(10vw,100px) 6vw; max-width:1200px; margin:0 auto; } .story h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); margin:0 0 30px; } .story .lead{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(17px,1.9vw,20px); color:var(--ink); line-height:1.9; max-width:680px; margin:0 0 36px; } .story p.body{ color:var(--ink-soft); line-height:2.1; font-size:15.5px; margin:0 0 24px; max-width:680px; } .story p.body:last-child{ margin-bottom:0; } /* ============ mission / vision ============ */ .mv-section{ background:var(--surface); padding:min(11vw,110px) 6vw; } .mv-wrap{ max-width:1200px; margin:0 auto; } .mv-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; } .mv-card{ border-radius:22px; padding:44px; } .mv-card.mission{ background:var(--sage-soft); } .mv-card.vision{ background:var(--peach-soft); } .mv-card .label{ font-family:'Murecho',sans-serif; font-weight:500; font-size:13.5px; } .mv-card.mission .label{ color:var(--sage-deep); } .mv-card.vision .label{ color:var(--peach-deep); } .mv-card p.big{ font-family:'Murecho',sans-serif; font-weight:500; font-size:22px; color:var(--ink); margin:18px 0; line-height:1.6; } .mv-card.vision p.big{ margin-bottom:0; } .mv-card p.desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.95; margin:0; } @media (max-width:800px){ .mv-cards{ grid-template-columns:1fr; } } /* ============ value cards (About) ============ */ .value-section{ padding:min(11vw,110px) 6vw; max-width:1200px; margin:0 auto; } .value-head{ max-width:600px; margin-bottom:44px; } .value-head h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); margin:0 0 18px; } .value-head p{ color:var(--ink-soft); line-height:2; font-size:15px; margin:0; } .value-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; } .value-card{ display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:20px; background:var(--white); } .value-card .mark{ flex:0 0 46px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-family:'Murecho',sans-serif; font-weight:500; font-size:14px; color:var(--ink); border-radius:50%; } .value-card .mark.sage{ background:var(--sage-soft); } .value-card .mark.peach{ background:var(--peach-soft); } .value-card h3{ font-family:'Murecho',sans-serif; font-weight:500; font-size:19px; color:var(--ink); margin:0 0 8px; } .value-card p{ color:var(--ink-soft); line-height:1.9; margin:0; font-size:15px; } /* ============ company overview (About) ============ */ .company-section{ background:var(--surface); padding:min(11vw,110px) 6vw; } .company-wrap{ max-width:1200px; margin:0 auto; } .company-wrap h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); margin:0 0 30px; } .overview-dl{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; margin:0; } .overview-row{ display:flex; padding:20px 0; border-bottom:1px solid var(--line); gap:26px; } .overview-row dt{ flex:0 0 96px; font-family:'Murecho',sans-serif; color:var(--ink-soft); font-weight:500; font-size:13px; margin:0; } .overview-row dd{ margin:0; color:var(--ink); font-size:15px; line-height:1.7; } @media (max-width:800px){ .overview-dl{ grid-template-columns:1fr; } } /* ============ service page blocks ============ */ .svc-block{ padding:min(10vw,100px) 6vw; max-width:1200px; margin:0 auto; } .svc-block.alt{ background:var(--surface); padding:min(10vw,100px) 6vw; max-width:none; } .svc-block.alt .svc-inner{ max-width:1200px; margin:0 auto; } .svc-head{ display:flex; align-items:flex-start; gap:26px; margin-bottom:44px; } .svc-head .num{ flex:0 0 110px; font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(72px,8vw,104px); line-height:1; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; } .svc-head.sales .num{ color:var(--num-sage-lg); } .svc-head.accounting .num{ color:var(--num-peach-lg); } .svc-head .tag{ display:block; font-family:'Murecho',sans-serif; font-weight:500; font-size:13.5px; color:var(--ink-soft); margin-bottom:10px; } .svc-head h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); margin:0 0 10px; } .svc-head .desc{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(16px,1.8vw,18px); color:var(--ink-soft); margin:0; line-height:1.8; } .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px; padding-top:38px; border-top:1px solid var(--line); } .svc-grid h3{ font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); font-weight:700; margin:0 0 16px; } .svc-grid ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:15px; line-height:2.2; } .svc-grid p{ color:var(--ink-soft); font-size:15px; line-height:1.95; margin:0; } @media (max-width:800px){ .svc-grid{ grid-template-columns:1fr; } } .together{ text-align:center; padding:min(11vw,110px) 6vw; max-width:1200px; margin:0 auto; } .together h2{ font-family:'Murecho',sans-serif; font-weight:500; font-size:clamp(20px,2.2vw,25px); margin:0 0 20px; } .together p{ color:var(--ink-soft); line-height:2; font-size:15px; max-width:620px; margin:0 auto 40px; } /* ============ contact page ============ */ .contact-section{ padding:min(9vw,88px) 6vw min(11vw,110px); max-width:1200px; margin:0 auto; display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; } .contact-info .photo-frame{ width:100%; max-width:320px; aspect-ratio:4/3; border-radius:22px; overflow:hidden; margin-bottom:34px; } .contact-info h2{ font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); font-weight:700; margin:0 0 16px; } .contact-info .company-name{ font-family:'Murecho',sans-serif; font-weight:500; font-size:19px; color:var(--ink); margin:0 0 18px; } .contact-info p{ margin:5px 0; color:var(--ink-soft); font-size:14.5px; } .contact-info .note{ margin-top:20px; color:var(--ink); font-weight:600; font-size:14.5px; } .contact-form{ display:flex; flex-direction:column; gap:22px; background:var(--surface); padding:40px; border-radius:22px; } .contact-form label{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--ink-soft); font-weight:600; } .contact-form .req{ color:var(--peach-deep); font-weight:400; } .contact-form input, .contact-form textarea{ font-family:'Noto Sans JP',sans-serif; font-size:15px; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--white); color:var(--ink); } .contact-form textarea{ resize:vertical; } .contact-form button{ align-self:flex-start; } .contact-sent{ text-align:center; padding:56px 24px; background:var(--surface); border-radius:22px; display:flex; flex-direction:column; align-items:center; gap:16px; } .contact-sent h3{ font-family:'Murecho',sans-serif; font-weight:500; color:var(--ink); margin:0; font-size:19px; } .contact-sent p{ color:var(--ink-soft); margin:0; font-size:14.5px; } @media (max-width:800px){ .contact-section{ grid-template-columns:1fr; gap:36px; } } /* ============ footer ============ */ .site-footer{ background:var(--surface-deep); color:var(--ink); margin-top:auto; } .footer-grid{ max-width:1200px; margin:0 auto; padding:64px 6vw 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; } .footer-brand{ display:flex; flex-direction:column; gap:10px; } .footer-brand .name{ font-family:'Murecho',sans-serif; font-weight:500; font-size:18px; } .footer-brand p{ font-family:'Murecho',sans-serif; font-weight:400; color:var(--ink-soft); font-size:14.5px; margin:6px 0 0; } .footer-col{ display:flex; flex-direction:column; gap:12px; font-size:14px; } .footer-col .label{ font-family:'Murecho',sans-serif; font-weight:500; font-size:13.5px; color:var(--sage-deep); margin-bottom:4px; } .footer-col a{ background:none; border:none; color:var(--ink); text-align:left; cursor:pointer; padding:0; font-size:14px; text-decoration:none; } .footer-col a:hover{ text-decoration:underline; } .footer-col p{ margin:0; color:var(--ink-soft); } .footer-bottom{ text-align:center; padding:24px 6vw; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }