html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #2b2b2b; }
* { box-sizing: border-box; }
/* ---------- entrance keyframes ---------- */
@keyframes g5In { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes g5InRail { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
/* ---------- Hero: Tokyo Tower soft glow breathing loop ---------- */
@keyframes g5TowerGlow {
0%, 100% { opacity: .40; }
50% { opacity: .92; }
}
.g5-tower-glow { will-change: opacity; }
/* ---------- base transitions on every interactive element ---------- */
#go5-home a { transition: transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, color .25s ease, background-position .55s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease; }
#go5-home a span { transition: transform .3s cubic-bezier(.2,.75,.3,1); }
#go5-home a svg { transition: transform .3s cubic-bezier(.2,.75,.3,1); }
/* ---------- on-load entrance ---------- */
.g5-in { animation: g5In .7s cubic-bezier(.2,.75,.3,1) both; }
#go5-home nav > a { animation: g5In .7s cubic-bezier(.2,.75,.3,1) both; }
#go5-home nav > a:nth-child(1){ animation-delay:.04s } #go5-home nav > a:nth-child(2){ animation-delay:.08s }
#go5-home nav > a:nth-child(3){ animation-delay:.12s } #go5-home nav > a:nth-child(4){ animation-delay:.16s }
#go5-home nav > a:nth-child(5){ animation-delay:.20s } #go5-home nav > a:nth-child(6){ animation-delay:.24s }
.g5-in.g5-d1 { animation-delay:.14s } .g5-in.g5-d2 { animation-delay:.20s } .g5-in.g5-d3 { animation-delay:.30s }
/* nav underline/hover states are owned by the Site Menu component's own scoped CSS */
/* ---------- gradient pill CTAs ---------- */
.g5-cta { background-size:180% 100% !important; background-position:0 0; }
.g5-cta:hover { transform:translateY(-3px); background-position:100% 0; box-shadow:0 14px 30px -8px rgba(231,100,122,.55); }
.g5-cta:active { transform:translateY(-1px); }
.g5-cta:hover span { transform:translateX(3px); }
/* ---------- ghost / outline button ---------- */
.g5-ghost:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.95) !important; background:rgba(255,255,255,.1) !important; }
.g5-ghost:hover span { transform:translateX(4px); }
/* ---------- social rail ---------- */
#go5-home .g5-rail > a { animation: g5InRail .6s cubic-bezier(.2,.75,.3,1) both; }
#go5-home .g5-rail > a:nth-child(1){ animation-delay:.30s } #go5-home .g5-rail > a:nth-child(2){ animation-delay:.36s }
#go5-home .g5-rail > a:nth-child(3){ animation-delay:.42s } #go5-home .g5-rail > a:nth-child(4){ animation-delay:.48s }
#go5-home .g5-rail > a:nth-child(5){ animation-delay:.54s }
#go5-home .g5-rail > a:hover { transform:translateY(-3px) scale(1.14); }
/* ---------- "view all" text links ---------- */
.g5-more:hover { color:#2696AF !important; }
.g5-more:hover span, .g5-more:hover svg { transform:translateX(5px); }
.g5-more:hover svg line, .g5-more:hover svg polyline { stroke:#2696AF; }
/* ---------- footer email pill ---------- */
.g5-email:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,0,0,.4); }
/* ---------- footer column links ---------- */
#go5-home footer a:not(.g5-email):hover { color:rgba(255,255,255,.95) !important; transform:translateX(3px); }
/* ---------- language toggle JA / EN ---------- */
#go5-home .g5-lang > a { cursor:pointer; text-decoration:none; transition: transform .25s cubic-bezier(.2,.75,.3,1); }
#go5-home .g5-lang > a:hover { transform: translateY(-2px); }
#go5-home .g5-lang > a:hover span { color:#fff !important; }
/* ---------- content cards (services / works / blog) ---------- */
#go5-home .g5-cards > *, #go5-home .g5-cards-dark > * { transition: transform .45s cubic-bezier(.2,.75,.3,1), box-shadow .45s cubic-bezier(.2,.75,.3,1); cursor:pointer; }
#go5-home .g5-cards > *:hover { transform: translateY(-8px); box-shadow: 0 22px 44px -16px rgba(0,0,0,.28); }
#go5-home .g5-cards-dark > *:hover { transform: translateY(-8px); box-shadow: 0 22px 44px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22); }
#go5-home .g5-cards > * > div:first-child, #go5-home .g5-cards-dark > * > div:first-child { transition: transform .55s cubic-bezier(.2,.75,.3,1); }
#go5-home .g5-cards > *:hover > div:first-child, #go5-home .g5-cards-dark > *:hover > div:first-child { transform: scale(1.06); }
/* ---------- SNS icons (Let's Grow) ---------- */
#go5-home .g5-sns svg { transition: transform .28s cubic-bezier(.2,.75,.3,1); cursor:pointer; }
#go5-home .g5-sns svg:hover { transform: translateY(-3px) scale(1.18); }
/* ---------- SNS icons (footer) + logo ---------- */
#go5-home .g5-sns-footer > a { transition: transform .28s cubic-bezier(.2,.75,.3,1), background .28s ease, color .28s ease; cursor:pointer; }
#go5-home .g5-sns-footer > a:hover { transform: translateY(-3px); background: linear-gradient(135deg,#6EC5C1,#E7647A) !important; color:#fff; }
#go5-home .g5-logo { transition: transform .3s cubic-bezier(.2,.75,.3,1), opacity .25s ease; cursor:pointer; }
#go5-home .g5-logo:hover { transform: scale(1.03); opacity:.85; }
@media (prefers-reduced-motion: reduce) {
#go5-home *, #go5-home *::after { animation: none !important; }
}
/* ============================================================
RESPONSIVE — breakpoints 1440 / 1024 / 640 / 480
============================================================ */
/* ---------- 1440: service cards start to wrap ---------- */
@media (max-width: 1440px) {
#go5-home section[data-screen-label="Services"] .g5-cards { flex-wrap: wrap !important; }
#go5-home section[data-screen-label="Services"] .g5-cards > * { flex: 1 1 300px !important; min-width: 280px !important; }
}
/* ---------- 1024: tablet — hamburger nav, stacked process ---------- */
@media (max-width: 1024px) {
#go5-home .g5-hero-content { padding: 60px 44px !important; max-width: 600px !important; }
#go5-home .g5-hero-h1 { width: auto !important; height: auto !important; font-size: 44px !important; line-height: 1.32 !important; }
#go5-home .g5-hero-h1 span { width: auto !important; height: auto !important; font-size: 44px !important; line-height: 1.32 !important; }
#go5-home section[data-screen-label="Stats"] { padding-left: 44px !important; padding-right: 44px !important; }
#go5-home section[data-screen-label="Services"],
#go5-home section[data-screen-label="Process"],
#go5-home section[data-screen-label="Works"],
#go5-home section[data-screen-label="Blog"],
#go5-home footer { padding-left: 44px !important; padding-right: 44px !important; }
#go5-home section[data-screen-label="Process"] { flex-direction: column !important; gap: 30px !important; }
#go5-home section[data-screen-label="Process"] > div:first-child { width: auto !important; }
#go5-home .g5-cards-dark { flex-wrap: wrap !important; }
#go5-home .g5-cards-dark > * { flex: 1 1 300px !important; }
#go5-home .g5-values { flex-wrap: wrap !important; }
#go5-home .g5-values > div { flex: 1 1 28% !important; min-width: 230px !important; }
#go5-home .g5-grow { flex-wrap: wrap !important; padding: 38px 42px !important; }
#go5-home .g5-footer-top { flex-wrap: wrap !important; }
#go5-home .g5-footer-cols { flex-wrap: wrap !important; gap: 30px 44px !important; }
}
/* ---------- 640: mobile — single column ---------- */
@media (max-width: 640px) {
#go5-home section[data-screen-label="Hero"] { height: auto !important; min-height: 0 !important; }
#go5-home .g5-hero-content { padding: 56px 22px 64px !important; max-width: 100% !important; gap: 20px !important; }
#go5-home .g5-hero-h1 { font-size: clamp(32px, 8.6vw, 46px) !important; line-height: 1.3 !important; white-space: normal !important; }
#go5-home .g5-hero-h1 span { font-size: inherit !important; line-height: inherit !important; }
#go5-home section[data-screen-label="Hero"] p { font-size: 15px !important; line-height: 25px !important; }
#go5-home .g5-rail { display: none !important; }
#go5-home .g5-hero-btns { flex-wrap: wrap !important; gap: 12px !important; }
#go5-home section[data-screen-label="Stats"] { flex-wrap: wrap !important; height: auto !important; justify-content: flex-start !important; gap: 24px 18px !important; padding: 30px 40px !important; }
#go5-home .g5-stat-div { display: none !important; }
#go5-home section[data-screen-label="Stats"] > div:not(.g5-stat-div) { flex: 1 1 100% !important; justify-content: flex-start !important; }
#go5-home section[data-screen-label="Stats"] > div:not(.g5-stat-div) > div:last-child { flex-direction: row !important; align-items: baseline !important; gap: 7px !important; }
#go5-home section[data-screen-label="Services"],
#go5-home section[data-screen-label="Process"],
#go5-home section[data-screen-label="Works"],
#go5-home section[data-screen-label="Blog"] { padding-left: 22px !important; padding-right: 22px !important; }
#go5-home footer { padding-left: 5% !important; padding-right: 5% !important; }
#go5-home section[data-screen-label="Services"] { padding-top: 46px !important; padding-bottom: 46px !important; }
#go5-home .g5-svc-head { flex-direction: column !important; gap: 16px !important; }
#go5-home .g5-svc-head h2 { font-size: 26px !important; line-height: 38px !important; }
#go5-home .g5-svc-head p { text-align: left !important; font-size: 16px !important; line-height: 26px !important; }
#go5-home .g5-sec-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
#go5-home .g5-sec-head h2 { font-size: 25px !important; line-height: 35px !important; }
#go5-home section[data-screen-label="Services"] .g5-cards,
#go5-home section[data-screen-label="Works"] .g5-cards { flex-wrap: wrap !important; }
#go5-home section[data-screen-label="Services"] .g5-cards > *,
#go5-home section[data-screen-label="Works"] .g5-cards > *,
#go5-home .g5-cards-dark > * { flex: 1 1 100% !important; min-width: 0 !important; }
#go5-home .g5-proc-nums, #go5-home .g5-proc-dots { display: none !important; }
#go5-home .g5-proc-steps { flex-direction: column !important; gap: 26px !important; }
#go5-home .g5-proc-steps > div { padding-right: 0 !important; align-items: center !important; text-align: center !important; }
#go5-home .g5-values { flex-direction: column !important; gap: 22px !important; padding: 28px 24px !important; }
#go5-home .g5-values > div { flex: 1 1 100% !important; min-width: 0 !important; }
#go5-home .g5-grow { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; padding: 36px 26px !important; }
#go5-home .g5-grow h3 { font-size: 30px !important; line-height: 36px !important; }
#go5-home .g5-grow p { font-size: 14px !important; }
#go5-home .g5-grow .g5-email { flex: 1 1 auto !important; height: 54px !important; padding: 0 20px !important; }
#go5-home .g5-grow .g5-email span { font-size: 15px !important; }
#go5-home .g5-grow > div:last-child { align-items: center !important; }
#go5-home .g5-sns { justify-content: center !important; }
#go5-home .g5-footer-top { flex-direction: column !important; align-items: center !important; gap: 34px !important; text-align: center !important; }
#go5-home .g5-footer-top > div:first-child { width: auto !important; align-items: center !important; }
#go5-home .g5-sns-footer { justify-content: center !important; }
#go5-home .g5-footer-cols { flex-direction: column !important; align-items: center !important; gap: 28px !important; }
#go5-home .g5-footer-cols > div { min-width: 0; align-items: center !important; text-align: center !important; }
#go5-home .g5-footer-cols > div > div { justify-content: center !important; }
#go5-home .g5-footer-bottom { flex-direction: column !important; gap: 14px !important; align-items: center !important; }
#go5-home .g5-footer-bottom > div { flex-direction: column !important; align-items: center !important; gap: 14px !important; }
}
/* ---------- 480: very small ---------- */
@media (max-width: 480px) {
#go5-home section[data-screen-label="Stats"] > div:not(.g5-stat-div) { flex: 1 1 100% !important; }
#go5-home .g5-hero-btns > a { width: 100% !important; justify-content: center !important; }
#go5-home .g5-footer-cols { gap: 24px 24px !important; }
}
/* ============================================================
CONTENT CONTAINER SYSTEM — caps content on hi-res monitors
--g5-content = max readable content width (backgrounds stay full-bleed)
Reusable on sub-pages via .g5-container / .g5-section
============================================================ */
#go5-home { --g5-content: 1500px; --g5-gutter: 48px; }
/* Full-bleed sections, but their inner content is centred within --g5-content
by pushing the horizontal padding out symmetrically on large screens. */
@media (min-width: 1025px) {
#go5-home header,
#go5-home section[data-screen-label="Stats"],
#go5-home section[data-screen-label="Services"],
#go5-home section[data-screen-label="Process"],
#go5-home section[data-screen-label="Works"],
#go5-home section[data-screen-label="Blog"],
#go5-home footer {
padding-left: max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
padding-right: max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
}
/* Hero copy aligns to the same left grid line as the container */
#go5-home .g5-hero-content {
padding-left: max(80px, calc((100% - var(--g5-content)) / 2)) !important;
max-width: 900px !important;
}
}
/* Reusable wrappers for sub-pages / WordPress templates */
#go5-home .g5-container { width: 100%; max-width: var(--g5-content); margin-inline: auto; padding-inline: var(--g5-gutter); box-sizing: border-box; }
#go5-home .g5-section { padding-block: clamp(48px, 6vw, 80px); }
@media (max-width: 640px) { #go5-home .g5-container { padding-inline: 22px; } }
/* ============================================================
TYPOGRAPHY SYSTEM — standard hierarchy classes for all pages
Use these on sub-pages so headings stay consistent site-wide.
h1 → .g5-h1 · h2 → .g5-h2 · h3 → .g5-h3
eyebrow label → .g5-eyebrow · intro → .g5-lead · body → .g5-body
============================================================ */
#go5-home .g5-eyebrow { font-family:'Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#8c8c8c; margin:0; }
#go5-home .g5-h1 { font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:clamp(40px,5vw,72px); line-height:1.25; letter-spacing:-0.01em; color:#1e1e1e; margin:0; }
#go5-home .g5-h2 { font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.32; letter-spacing:-0.01em; color:#222; margin:0; }
#go5-home .g5-h3 { font-family:'Noto Sans JP',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,28px); line-height:1.35; color:#1e1e1e; margin:0; }
#go5-home .g5-h4 { font-family:'Noto Sans JP',sans-serif; font-weight:700; font-size:clamp(16px,1.4vw,19px); line-height:1.5; color:#222; margin:0; }
#go5-home .g5-lead { font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:clamp(16px,1.4vw,20px); line-height:1.7; color:#646464; margin:0; }
#go5-home .g5-body { font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:15px; line-height:1.8; color:#5a5a5a; margin:0; }
#go5-home .g5-eyebrow-light { color:rgba(255,255,255,0.75); }
#go5-home .g5-h2-light { color:#fff; }
/* ============================================================
HERO · keep the headline clear of the Tokyo Tower artwork
============================================================ */
@media (min-width: 1025px) and (max-width: 1440px) {
#go5-home .g5-hero-scrim { background: linear-gradient(90deg, rgba(6,20,50,0.92) 0%, rgba(6,20,50,0.6) 48%, rgba(6,20,50,0.18) 100%) !important; }
#go5-home .g5-hero-content { max-width: 760px !important; }
#go5-home .g5-hero-h1 { font-size: 50px !important; }
#go5-home .g5-hero-h1 span { font-size: 50px !important; }
#go5-home section[data-screen-label="Hero"] img.g5-hero-bg { object-position: 50% center !important; }
}
@media (max-width: 1024px) {
#go5-home section[data-screen-label="Hero"] img.g5-hero-bg { object-position: 84% center !important; }
#go5-home .g5-hero-scrim { background: linear-gradient(90deg, rgba(6,20,50,0.94) 0%, rgba(6,20,50,0.74) 52%, rgba(6,20,50,0.32) 100%) !important; }
#go5-home .g5-tower-glow { background: radial-gradient(36% 42% at 86% 40%, rgba(255,172,206,0.4) 0%, rgba(255,110,150,0.16) 46%, rgba(140,95,255,0) 72%) !important; }
}
@media (max-width: 640px) {
#go5-home section[data-screen-label="Hero"] img.g5-hero-bg { object-position: 90% center !important; }
#go5-home .g5-hero-scrim { background: linear-gradient(180deg, rgba(6,20,50,0.72) 0%, rgba(6,20,50,0.62) 45%, rgba(6,20,50,0.9) 100%) !important; }
#go5-home .g5-tower-glow { opacity: .5 !important; }
}