html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: rgb(245,242,238); }
* { box-sizing: border-box; }
@keyframes g5In { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
#go5-company { --g5-content: 1500px; --g5-gutter: 48px; }
@media (min-width: 1025px) {
#go5-company header,
#go5-company > main > nav.g5-crumb,
#go5-company section[data-screen-label="Company Hero"],
#go5-company section[data-screen-label="Story Intro"],
#go5-company section[data-screen-label="Timeline"] > div,
#go5-company section[data-screen-label="Two Roles"],
#go5-company section[data-screen-label="Founder Message"],
#go5-company section[data-screen-label="Philosophy"],
#go5-company section[data-screen-label="Today"],
#go5-company section[data-screen-label="Team"],
#go5-company section[data-screen-label="Profile"],
#go5-company section[data-screen-label="Location"],
#go5-company section[data-screen-label="Contact"],
#go5-company section[data-screen-label="TMFukushima Chapter"],
#go5-company 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;
}
}
#go5-company .g5-eyebrow { font-family:'Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#8c8c8c; margin:0; }
#go5-company .g5-eyebrow-light { color:rgba(255,255,255,0.65); }
#go5-company .g5-h1 { font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:48px; line-height:1.4; letter-spacing:-0.5px; color:#fff; margin:0; }
#go5-company .g5-h2 { font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:clamp(26px,2.8vw,34px); line-height:1.4; letter-spacing:-0.01em; color:#222; margin:0; word-break: keep-all; overflow-wrap: break-word; }
#go5-company .g5-h2-light { color: #fff; }
#go5-company .g5-body { font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:16.5px; line-height:1.9; color:#5f5f5f; margin:0; max-width: 720px; }
#go5-company .g5-body-light { color: rgba(255,255,255,0.75); }
#go5-company a { transition: transform .3s cubic-bezier(.2,.75,.3,1), color .25s ease, background-color .25s ease, border-color .25s ease; }
.g5-in { animation: g5In .7s cubic-bezier(.2,.75,.3,1) both; }
#go5-company .g5-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#go5-company .g5-section-label { display: flex; align-items: center; gap: 8px; }
/* philosophy cards */
#go5-company .g5-phil-card { background: rgb(250,248,246); border: 1px solid rgb(224,221,216); border-radius: 14px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
/* what-we-do mini cards */
#go5-company .g5-wwd-card { border-radius: 12px; border: 1px solid rgb(224,221,216); background: rgb(250,248,246); padding: 20px 20px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: transform .35s cubic-bezier(.2,.75,.3,1), box-shadow .35s ease; }
#go5-company .g5-wwd-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -18px rgba(0,0,0,0.25); }
/* team card */
#go5-company .g5-team-box { background: rgb(238,235,230); border-radius: 18px; padding: 40px 44px; }
/* profile table */
#go5-company .g5-profile-table { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid rgb(224,221,216); background: rgb(250,248,246); }
#go5-company .g5-profile-row { display: flex; flex-direction: row; border-bottom: 1px solid rgb(228,225,219); }
#go5-company .g5-profile-row:last-child { border-bottom: none; }
#go5-company .g5-profile-key { width: 260px; flex-shrink: 0; padding: 18px 26px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 14px; color: rgb(80,80,80); background: rgb(240,237,232); }
#go5-company .g5-profile-val { flex: 1; padding: 18px 26px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.8; color: rgb(60,60,60); }
/* CTA button */
#go5-company .g5-cta-soft { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:100px; background: rgb(34,34,34); color:#fff; text-decoration:none; font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:15px; flex-shrink: 0; }
#go5-company .g5-cta-soft:hover { transform: translateY(-3px); background: rgb(20,20,20); }
#go5-company .g5-cta-ghost { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:100px; border: 1.5px solid rgb(60,60,60); color: rgb(34,34,34); text-decoration:none; font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:15px; }
#go5-company .g5-cta-ghost:hover { background: rgb(34,34,34); color: #fff; }
/* hero */
#go5-company .g5-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 42%; }
#go5-company .g5-hero-overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(6,16,45,0.93) 0%, rgba(15,40,85,0.86) 50%, rgba(9,20,48,0.94) 100%); }
#go5-company .g5-hero-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 16px 7px 12px; border-radius:100px; background:rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); font-family:'Inter',sans-serif; font-weight:500; font-size:13px; color:rgba(255,255,255,0.85); width:fit-content; }
/* timeline chapters */
#go5-company .g5-chapter { display: flex; flex-direction: row; gap: 56px; align-items: center; padding: 64px 0; border-top: 1px solid rgb(228,225,219); }
#go5-company .g5-chapter:first-of-type { border-top: none; }
#go5-company .g5-chapter-rev { flex-direction: row-reverse; }
#go5-company .g5-chapter-text { flex: 1.1; display: flex; flex-direction: column; gap: 16px; }
#go5-company .g5-chapter-media { flex: 1; display: flex; flex-direction: column; gap: 12px; }
#go5-company .g5-chapter-num { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 44px; color: rgba(45,93,136,0.3); line-height: 1; }
#go5-company .g5-chapter-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
#go5-company .g5-chapter-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#go5-company .g5-chapter-duo { display: flex; flex-direction: row; gap: 12px; }
#go5-company .g5-chapter-duo .g5-chapter-img { flex: 1; aspect-ratio: 1/1; }
#go5-company .g5-chapter-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 100px; background: rgba(110,197,193,0.14); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: rgb(45,140,135); width: fit-content; }
#go5-company .g5-chapter-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.1); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: rgb(150,210,207); width: fit-content; }
/* founder message caption */
#go5-company .g5-founder-cap { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 13px; line-height: 20px; color: rgb(140,140,140); }
/* contact form fields */
#go5-company .g5-field label { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 13px; color: rgb(60,60,60); display: flex; align-items: center; gap: 6px; }
#go5-company .g5-field .g5-req { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .5px; color: rgb(231,100,122); background: rgba(231,100,122,0.1); padding: 2px 7px; border-radius: 100px; }
#go5-company .g5-field .g5-opt { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .5px; color: rgb(150,150,150); background: rgb(238,235,230); padding: 2px 7px; border-radius: 100px; }
#go5-company .g5-field input, #go5-company .g5-field select, #go5-company .g5-field textarea { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; color: rgb(30,30,30); border: 1px solid rgb(222,219,214); border-radius: 10px; padding: 13px 16px; background: rgb(255,255,255); width: 100%; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
#go5-company .g5-field input:focus, #go5-company .g5-field select:focus, #go5-company .g5-field textarea:focus { border-color: rgb(100,190,220); box-shadow: 0 0 0 3px rgba(100,190,220,0.18); }
#go5-company .g5-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(231,100,122,.5); }
/* responsive */
@media (max-width: 1024px) {
#go5-company header,
#go5-company > main > nav.g5-crumb,
#go5-company section[data-screen-label="Company Hero"],
#go5-company section[data-screen-label="Story Intro"],
#go5-company section[data-screen-label="Timeline"] > div,
#go5-company section[data-screen-label="Two Roles"],
#go5-company section[data-screen-label="Founder Message"],
#go5-company section[data-screen-label="Philosophy"],
#go5-company section[data-screen-label="Today"],
#go5-company section[data-screen-label="Team"],
#go5-company section[data-screen-label="Profile"],
#go5-company section[data-screen-label="Location"],
#go5-company section[data-screen-label="Contact"],
#go5-company section[data-screen-label="TMFukushima Chapter"] { padding-left: 44px !important; padding-right: 44px !important; }
#go5-company section[data-screen-label="Company Hero"] h1 { font-size: 36px !important; }
#go5-company .g5-about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
#go5-company .g5-phil-grid { grid-template-columns: 1fr !important; }
#go5-company .g5-wwd-grid { grid-template-columns: repeat(2, 1fr) !important; }
#go5-company .g5-team-box { flex-direction: column !important; padding: 32px 30px !important; }
#go5-company .g5-chapter, #go5-company .g5-chapter-rev { flex-direction: column !important; gap: 28px !important; }
#go5-company .g5-contact-row { flex-direction: column !important; }
}
@media (max-width: 640px) {
#go5-company header,
#go5-company > main > nav.g5-crumb,
#go5-company section[data-screen-label="Company Hero"],
#go5-company section[data-screen-label="Story Intro"],
#go5-company section[data-screen-label="Timeline"] > div,
#go5-company section[data-screen-label="Two Roles"],
#go5-company section[data-screen-label="Founder Message"],
#go5-company section[data-screen-label="Philosophy"],
#go5-company section[data-screen-label="Today"],
#go5-company section[data-screen-label="Team"],
#go5-company section[data-screen-label="Profile"],
#go5-company section[data-screen-label="Location"],
#go5-company section[data-screen-label="Contact"],
#go5-company section[data-screen-label="TMFukushima Chapter"] { padding-left: 22px !important; padding-right: 22px !important; }
#go5-company section[data-screen-label="Company Hero"] { min-height: 380px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
#go5-company section[data-screen-label="Company Hero"] h1 { font-size: clamp(28px, 8vw, 36px) !important; }
#go5-company section[data-screen-label="Company Hero"] p { font-size: 15px !important; line-height: 25px !important; }
#go5-company .g5-wwd-grid { grid-template-columns: 1fr !important; }
#go5-company .g5-profile-row { flex-direction: column !important; }
#go5-company .g5-profile-key { width: auto !important; padding: 14px 18px 6px !important; }
#go5-company .g5-profile-val { padding: 4px 18px 16px !important; }
#go5-company .g5-form-row { grid-template-columns: 1fr !important; }
#go5-company .g5-contact-row > div:first-child { width: auto !important; }
#go5-company section[data-screen-label="TMFukushima Chapter"] div[style*="flex: 0.8"] { width: 90% !important; max-width: 90% !important; margin: 0 auto !important; }
#go5-company section[data-screen-label="Founder Message"] > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
#go5-company section[data-screen-label="Founder Message"] > div[style*="grid-template-columns"] > div:first-child { max-width: 60% !important; margin: 0 auto !important; }
}