/* ========================================================================== 共通設定（全ページ共通） ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cream: #faf8f5; --cream2: #f3f0eb; --dark: #1c1c1a; --gray: #888880; --light-gray: #ccc9c2; --accent: #c8a882; --font-en: 'Poppins', sans-serif; --font-ja: 'Zen Kaku Gothic New', sans-serif; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--dark); font-family: var(--font-en); font-weight: 300; line-height: 1.7; } /* ── フェードアップ表示（全ページ共通） ── */ .fade-up { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; } .js-loaded .fade-up { opacity: 0; transform: translateY(24px); } .js-loaded .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up-delay-1 { transition-delay: 0.1s; } .fade-up-delay-2 { transition-delay: 0.2s; } .fade-up-delay-3 { transition-delay: 0.3s; } .fade-up-delay-4 { transition-delay: 0.4s; } /* ========================================================================== WORK詳細ページ（旧レイアウト） hiyari / ikiki / uniko / usami / kaigaiiju を付けたページに適用 ========================================================================== */ body.layout-classic nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 3rem; background: rgba(250,248,245,0.88); backdrop-filter: blur(12px); } body.layout-classic .nav-logo { font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--dark); text-decoration: none; } body.layout-classic .nav-back { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; color: var(--gray); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; } body.layout-classic .nav-back:hover { color: var(--dark); } body.layout-classic .nav-back::before { content: "←"; } body.layout-classic .detail-hero { padding-top: 5rem; margin-bottom: 0; } body.layout-classic .hero-image { width: 100%; aspect-ratio: 16/7; overflow: hidden; background: none; padding: 0 3rem; } body.layout-classic .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } body.layout-classic .hero-info { padding: 3rem 3rem 0; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 0.5px solid var(--light-gray); padding-bottom: 2rem; gap: 2rem; } body.layout-classic .hero-title-block {} body.layout-classic .hero-en { font-size: 11px; letter-spacing: 0.18em; color: var(--accent); font-weight: 400; margin-bottom: 0.6rem; } body.layout-classic .hero-title-ja { font-family: var(--font-ja); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.3; color: var(--dark); margin-bottom: 0.3rem; } body.layout-classic .hero-title-en { font-family: var(--font-en); font-size: 0.8rem; font-weight: 300; color: var(--gray); letter-spacing: 0.02em; } body.layout-classic .hero-meta { text-align: right; flex-shrink: 0; } body.layout-classic .hero-tags { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } body.layout-classic .tag { font-size: 10px; letter-spacing: 0.1em; color: var(--gray); border: 0.5px solid var(--light-gray); padding: 3px 10px; border-radius: 2px; font-weight: 400; } body.layout-classic .detail-section { padding: 5rem 3rem; border-bottom: 0.5px solid var(--light-gray); } body.layout-classic .section-header { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; } body.layout-classic .section-label { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); font-weight: 400; padding-top: 0.3rem; } body.layout-classic .section-body { font-family: var(--font-ja); font-size: 15px; font-weight: 300; color: var(--dark); line-height: 2; } body.layout-classic .section-body p + p { margin-top: 1.2rem; } body.layout-classic .visual-section { padding: 5rem 3rem; border-bottom: 0.5px solid var(--light-gray); } body.layout-classic .visual-label { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); font-weight: 400; margin-bottom: 2.5rem; } body.layout-classic .visual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } body.layout-classic .visual-grid .full { grid-column: span 2; } body.layout-classic .visual-item { background: var(--cream2); overflow: hidden; border-radius: 3px; } body.layout-classic .visual-item img { width: 100%; height: 100%; object-fit: cover; display: block; } body.layout-classic .visual-item.tall { aspect-ratio: 4/3; } body.layout-classic .visual-item.wide { aspect-ratio: 16/7; } body.layout-classic .work-nav { padding: 4rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } body.layout-classic .work-nav-item { text-decoration: none; padding: 2rem; border: 0.5px solid var(--light-gray); border-radius: 3px; transition: border-color 0.2s, background 0.2s; display: flex; flex-direction: column; gap: 0.5rem; } body.layout-classic .work-nav-item:hover { border-color: #e2ddd5; background: var(--cream2); } body.layout-classic .work-nav-dir { font-size: 10px; letter-spacing: 0.15em; color: var(--light-gray); font-weight: 400; } body.layout-classic .work-nav-title { font-family: var(--font-ja); font-size: 14px; font-weight: 400; color: var(--dark); } body.layout-classic .work-nav-item.next { text-align: right; } @media (max-width: 1024px) { body.layout-classic nav { padding: 1.4rem 2rem; } body.layout-classic .hero-image { padding: 0 2rem; } body.layout-classic .hero-info { padding: 3rem 2rem 0; padding-bottom: 2rem; } body.layout-classic .detail-section, body.layout-classic .visual-section { padding: 5rem 2rem; } body.layout-classic .work-nav { padding: 4rem 2rem; } } @media (max-width: 768px) { body.layout-classic nav { padding: 1rem 1.5rem; } body.layout-classic .hero-image { padding: 0 1.5rem; aspect-ratio: 4/3; } body.layout-classic .hero-info { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem 1.5rem; } body.layout-classic .hero-meta { text-align: left; } body.layout-classic .hero-tags { justify-content: flex-start; } body.layout-classic .detail-section, body.layout-classic .visual-section { padding: 3rem 1.5rem; } body.layout-classic .section-header { grid-template-columns: 1fr; gap: 1rem; } body.layout-classic .visual-grid { grid-template-columns: 1fr; } body.layout-classic .visual-grid .full { grid-column: span 1; } body.layout-classic .work-nav { padding: 3rem 1.5rem; grid-template-columns: 1fr; } } /* ========================================================================== WORK詳細ページ（新レイアウト） petimo / mk / onionsoup を付けたページに適用 ========================================================================== */ body.layout-update .detail-hero, body.layout-update .hero-laptop, body.layout-update .detail-section, body.layout-update .visual-section, body.layout-update .work-nav { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } body.layout-update nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.4rem 8rem; background: rgba(250,248,245,0.88); backdrop-filter: blur(12px); } body.layout-update nav .nav-inner { width: 100%; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; } body.layout-update .nav-logo { font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--dark); text-decoration: none; } body.layout-update .nav-back { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; color: var(--gray); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; } body.layout-update .nav-back:hover { color: var(--dark); } body.layout-update .nav-back::before { content: "←"; } body.layout-update .detail-hero { padding-top: 5rem; margin-bottom: 0; } body.layout-update .hero-image { width: 100%; overflow: hidden; background: none; } body.layout-update .hero-image img { width: 100%; height: auto; display: block; } body.layout-update .hero-info { padding: 3rem 0 0; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 0.5px solid var(--light-gray); padding-bottom: 2rem; gap: 2rem; } body.layout-update .hero-title-block {} body.layout-update .hero-en { font-size: 11px; letter-spacing: 0.18em; color: var(--accent); font-weight: 400; margin-bottom: 0.6rem; } body.layout-update .hero-title-ja { font-family: var(--font-ja); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.3; color: var(--dark); margin-bottom: 0.3rem; } body.layout-update .hero-title-en { font-family: var(--font-en); font-size: 0.8rem; font-weight: 300; color: var(--gray); letter-spacing: 0.02em; } body.layout-update .hero-note { font-family: var(--font-ja); font-size: 12px; font-weight: 300; color: var(--gray); margin-top: 1rem; } body.layout-update .hero-meta { text-align: right; flex-shrink: 0; } body.layout-update .hero-tags { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } body.layout-update .hero-url { display: inline-block; margin-top: 0.7rem; font-size: 13px; letter-spacing: 0.02em; color: var(--accent); text-decoration: none; } body.layout-update .hero-url:hover { text-decoration: underline; } body.layout-update .tag { font-size: 10px; letter-spacing: 0.1em; color: var(--gray); border: 0.5px solid var(--light-gray); padding: 3px 10px; border-radius: 2px; font-weight: 400; } body.layout-update .detail-section { padding: 5rem 0; border-bottom: 0.5px solid var(--light-gray); } body.layout-update .section-header { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; } body.layout-update .section-label { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); font-weight: 400; padding-top: 0.3rem; } body.layout-update .section-body { font-family: var(--font-ja); font-size: 15px; font-weight: 300; color: var(--dark); line-height: 2; } body.layout-update .section-body p + p { margin-top: 1.2rem; } body.layout-update .visual-logo-block { display: flex; flex-direction: column; gap: 1.5rem; } body.layout-update .visual-logo-text { font-family: var(--font-ja); font-size: 13px; font-weight: 300; color: var(--gray); line-height: 2; text-align: left; } body.layout-update .visual-pcsp-wrap { display: flex; justify-content: center; align-items: flex-start; gap: clamp(40px, 6vw, 100px); height: 90rem; } body.layout-update .visual-pc { flex-shrink: 0; min-width: 0; height: 100%; } body.layout-update .visual-pc img { height: 100%; object-fit: contain; object-position: top; display: block; box-shadow: 4px 8px 24px rgba(215, 206, 197, 0.2); } body.layout-update .visual-sp { flex-shrink: 0; height: 100%; } body.layout-update .visual-sp img { height: 100%; width: auto; object-fit: contain; object-position: top; display: block; box-shadow: 4px 8px 24px rgba(215, 206, 197, 0.2); } body.layout-update .hero-laptop { padding: 3rem 0; background: none; } body.layout-update .hero-laptop img { width: 100%; height: auto; display: block; } body.layout-update .visual-section { padding: 5rem 0; border-bottom: 0.5px solid var(--light-gray); } body.layout-update .visual-label { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); font-weight: 400; margin-bottom: 2.5rem; } body.layout-update .visual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px; } body.layout-update .visual-grid .full { grid-column: span 2; } body.layout-update .visual-item { background: transparent; } body.layout-update .visual-item img { width: 100%; height: auto; display: block; } body.layout-update .work-nav { padding: 4rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } body.layout-update .work-nav-item { text-decoration: none; padding: 2rem; border: 0.5px solid var(--light-gray); border-radius: 3px; transition: border-color 0.2s, background 0.2s; display: flex; flex-direction: column; gap: 0.5rem; } body.layout-update .work-nav-item:hover { border-color: #e2ddd5; background: var(--cream2); } body.layout-update .work-nav-dir { font-size: 10px; letter-spacing: 0.15em; color: var(--light-gray); font-weight: 400; } body.layout-update .work-nav-title { font-family: var(--font-ja); font-size: 14px; font-weight: 400; color: var(--dark); } body.layout-update .work-nav-item.next { text-align: right; } @media (max-width: 1024px) { body.layout-update .detail-hero, body.layout-update .hero-laptop, body.layout-update .detail-section, body.layout-update .visual-section, body.layout-update .work-nav { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (max-width: 768px) { body.layout-update nav { padding: 1rem 1.5rem; } body.layout-update .hero-info { flex-direction: column; align-items: flex-start; padding-top: 2rem; } body.layout-update .hero-meta { text-align: left; } body.layout-update .hero-tags { justify-content: flex-start; } body.layout-update .detail-section, body.layout-update .visual-section, body.layout-update .hero-laptop { padding-top: 3rem; padding-bottom: 3rem; } body.layout-update .section-header { grid-template-columns: 1fr; gap: 1rem; } body.layout-update .visual-grid { grid-template-columns: 1fr; gap: 40px; } body.layout-update .visual-grid .full { grid-column: span 1; } body.layout-update .work-nav { padding-top: 3rem; padding-bottom: 3rem; grid-template-columns: 1fr; } body.layout-update .visual-pcsp-wrap { flex-direction: column; align-items: center; height: auto; gap: 32px; } body.layout-update .visual-pc { width: 100%; height: auto; } body.layout-update .visual-pc img { height: auto; width: 100%; } body.layout-update .visual-sp { height: auto; } body.layout-update .visual-sp img { height: auto; width: 60%; margin: 0 auto; } } /* ========================================================================== トップページ（index.html）専用を付けたページに適用 ========================================================================== */ body.page-home nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 3rem; background: rgba(250,248,245,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 0.5px solid transparent; transition: border-color 0.3s; } body.page-home nav.scrolled { border-bottom-color: var(--light-gray); } body.page-home .nav-logo { font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--dark); text-decoration: none; } body.page-home .nav-links { display: flex; gap: 2rem; list-style: none; } body.page-home .nav-links a { font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; color: var(--gray); text-decoration: none; transition: color 0.2s; } body.page-home .nav-links a:hover { color: var(--dark); } body.page-home #hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 7rem 3rem 4rem; } body.page-home .hero-label { font-size: 10px; letter-spacing: 0.2em; color: var(--gray); margin-bottom: 1.8rem; font-weight: 400; opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0s; } body.page-home .hero-label.visible { clip-path: inset(0 0% 0 0); } body.page-home .hero-name { font-family: var(--font-en); font-size: clamp(3.2rem, 8vw, 6.5rem); font-weight: 300; line-height: 1.05; letter-spacing: 0; color: #50504a; margin-bottom: 2rem; opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s; } body.page-home .hero-name.visible { clip-path: inset(0 0% 0 0); } body.page-home .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; border-top: 0.5px solid var(--light-gray); padding-top: 1.5rem; margin-top: 1rem; } body.page-home .hero-catch { font-family: var(--font-en); font-size: 15px; font-weight: 300; font-style: italic; color: var(--gray); max-width: 320px; line-height: 1.6; opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.8s; } body.page-home .hero-catch.visible { clip-path: inset(0 0% 0 0); } body.page-home .hero-sub { font-family: var(--font-ja); font-size: 12px; font-weight: 300; color: var(--dark); text-align: right; line-height: 2; } body.page-home section { padding: 6rem 3rem; } body.page-home .section-label { font-size: 10px; letter-spacing: 0.22em; color: var(--gray); font-weight: 400; margin-bottom: 3rem; } body.page-home #work { padding-top: 4rem; } body.page-home .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: stretch; } body.page-home .work-card:nth-child(1) { grid-column: span 7; } body.page-home .work-card:nth-child(2) { grid-column: span 5; } body.page-home .work-card:nth-child(3) { grid-column: span 4; } body.page-home .work-card:nth-child(4) { grid-column: span 4; } body.page-home .work-card:nth-child(5) { grid-column: span 4; } body.page-home .work-card:nth-child(6) { grid-column: span 7; } body.page-home .work-card:nth-child(7) { grid-column: span 5; } body.page-home .work-card:nth-child(8) { grid-column: span 3; } body.page-home .work-card:nth-child(9) { grid-column: span 3; } body.page-home .work-card:nth-child(10) { grid-column: span 6; } body.page-home .work-card { position: relative; overflow: hidden; background: var(--cream2); cursor: pointer; border-radius: 3px; display: block; text-decoration: none; } body.page-home .work-thumb { width: 100%; aspect-ratio: 3/2; background: var(--cream2); overflow: hidden; position: relative; } body.page-home .work-card:nth-child(2) .work-thumb { aspect-ratio: 15/14.1; } body.page-home .work-card:nth-child(7) .work-thumb { aspect-ratio: 15/14.1; } body.page-home .work-card:nth-child(9) .work-thumb { aspect-ratio: unset; height: 100%; } body.page-home .work-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body.page-home .work-card.coming-soon .work-thumb { background: #e8e6e1; position: relative; aspect-ratio: unset; height: 100%; } body.page-home .work-card.coming-soon { } body.page-home .work-card.coming-soon:hover .work-overlay { opacity: 0; } body.page-home .work-thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0.2em; color: var(--light-gray); font-weight: 400; font-family: var(--font-en); text-align: center; } body.page-home .work-card:hover .work-thumb img { transform: scale(1.04); } body.page-home .work-overlay { position: absolute; inset: 0; background: rgba(28, 28, 26, 0.52); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; opacity: 0; transition: opacity 0.35s ease; padding: 1.5rem; z-index: 2; border-radius: 3px; } body.page-home .work-card:hover .work-overlay { opacity: 1; } body.page-home .work-overlay .work-cat { font-size: 9px; letter-spacing: 0.18em; color: rgba(255,255,255,0.7); font-weight: 400; text-align: center; } body.page-home .work-overlay .work-title { font-family: var(--font-ja); font-size: 13px; font-weight: 400; color: #fff; line-height: 1.6; text-align: center; } body.page-home .work-card.coming-soon { opacity: 1; cursor: default; background: #e8e6e1; } body.page-home #about { display: grid; grid-template-columns: 1fr 0.7fr; gap: 12rem; align-items: start; border-top: 0.5px solid var(--light-gray); } body.page-home .about-left {} body.page-home .about-right {} body.page-home .about-name-en { font-family: var(--font-en); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.5rem; } body.page-home .about-name-ja { font-family: var(--font-ja); font-size: 13px; font-weight: 300; color: var(--gray); margin-bottom: 2rem; } body.page-home .about-body { font-family: var(--font-ja); font-size: 14px; font-weight: 300; color: var(--gray); line-height: 2; margin-bottom: 2rem; } body.page-home .about-tools { display: flex; flex-wrap: wrap; gap: 6px; } body.page-home .tool-tag { font-size: 10px; letter-spacing: 0.1em; color: var(--gray); border: 0.5px solid var(--light-gray); padding: 4px 10px; border-radius: 2px; font-weight: 400; } body.page-home .about-photo { width: 100%; max-width: 550px; aspect-ratio: 3/4; background: #fff; border-radius: 3px; overflow: hidden; } body.page-home #service { border-top: 0.5px solid var(--light-gray); } body.page-home .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } body.page-home .service-item { padding: 2rem 0; border-bottom: 0.5px solid var(--light-gray); border-right: 0.5px solid var(--light-gray); padding-right: 2rem; padding-left: 0; } body.page-home .service-item:nth-child(3n) { border-right: none; } body.page-home .service-item:nth-child(3n/**/+1) { padding-left: 0; } body.page-home .service-item:nth-child(3n/**/+2), body.page-home .service-item:nth-child(3n/**/+3) { padding-left: 2rem; } body.page-home .service-num { font-size: 10px; letter-spacing: 0.12em; color: var(--light-gray); margin-bottom: 1rem; font-weight: 400; } body.page-home .service-name { font-family: var(--font-en); font-size: 14px; font-weight: 400; color: var(--dark); line-height: 1.4; } body.page-home #features { border-top: 0.5px solid var(--light-gray); } body.page-home .features-header { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; margin-bottom: 3rem; } body.page-home .features-title { font-family: var(--font-en); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; } body.page-home .features-intro { font-family: var(--font-ja); font-size: 13px; font-weight: 300; color: var(--gray); line-height: 2; align-self: end; } body.page-home .features-list { display: flex; flex-direction: column; } body.page-home .feature-row { display: grid; grid-template-columns: 2rem 1fr 1fr; gap: 2rem; align-items: center; padding: 1.6rem 0; border-bottom: 0.5px solid var(--light-gray); } body.page-home .feature-row:first-child { border-top: 0.5px solid var(--light-gray); } body.page-home .feature-num { font-size: 10px; color: var(--light-gray); font-weight: 400; letter-spacing: 0.1em; } body.page-home .feature-ja { font-family: var(--font-ja); font-size: 14px; font-weight: 400; color: var(--dark); } body.page-home .feature-en { font-size: 12px; font-weight: 300; color: var(--gray); letter-spacing: 0.04em; } body.page-home footer { border-top: 0.5px solid var(--light-gray); padding: 4rem 3rem; display: grid; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 2rem; } body.page-home .footer-left {} body.page-home .footer-catch { font-family: var(--font-en); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1.5rem; color: var(--gray); } body.page-home .footer-mail { font-family: var(--font-en); font-size: 13px; font-weight: 300; color: var(--gray); text-decoration: none; letter-spacing: 0.05em; border-bottom: 0.5px solid var(--light-gray); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } body.page-home .footer-mail:hover { color: var(--dark); border-color: var(--dark); } body.page-home .footer-right { text-align: right; } body.page-home .footer-copy { font-size: 10px; letter-spacing: 0.1em; color: var(--light-gray); } body.page-home .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; cursor: pointer; background: none; border: none; padding: 0; z-index: 200; } body.page-home .hamburger span { display: block; width: 100%; height: 1.2px; background: var(--dark); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } body.page-home .hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.page-home .hamburger.open span:nth-child(2) { opacity: 0; } body.page-home .hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } body.page-home .mobile-menu { display: none; position: fixed; inset: 0; background: var(--cream); z-index: 150; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } body.page-home .mobile-menu.open { display: flex; } body.page-home .mobile-menu a { font-family: var(--font-en); font-size: 2rem; font-weight: 300; letter-spacing: 0.1em; color: var(--gray); text-decoration: none; transition: color 0.2s; } body.page-home .mobile-menu a:hover { color: var(--gray); } @media (max-width: 1024px) { body.page-home nav { padding: 1.4rem 2rem; } body.page-home section, body.page-home #hero { padding-left: 2rem; padding-right: 2rem; } body.page-home #about { gap: 5rem; } body.page-home .about-photo { max-width: 420px; } body.page-home .service-grid { grid-template-columns: repeat(2, 1fr); } body.page-home .service-item:nth-child(2n) { border-right: none; } body.page-home .service-item:nth-child(3n) { border-right: 0.5px solid var(--light-gray); } body.page-home .service-item:nth-child(2n/**/+1) { padding-left: 0; } body.page-home .service-item:nth-child(2n) { padding-left: 2rem; } body.page-home .service-item:nth-child(3n/**/+2), body.page-home .service-item:nth-child(3n/**/+3) { padding-left: 2rem; } body.page-home .features-header { grid-template-columns: 1fr; gap: 1.5rem; } body.page-home .features-intro { align-self: start; } } @media (max-width: 768px) { body.page-home nav { padding: 1rem 1.5rem; } body.page-home .hamburger { display: flex; } body.page-home .nav-links { display: none; } body.page-home section, body.page-home #hero { padding-left: 1.5rem; padding-right: 1.5rem; } body.page-home #hero { padding-top: 6rem; padding-bottom: 3rem; min-height: 90vh; } body.page-home .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; } body.page-home .hero-catch { max-width: 100%; } body.page-home .hero-sub { text-align: left; } body.page-home footer { padding: 3rem 1.5rem; grid-template-columns: 1fr; gap: 2rem; } body.page-home .footer-right { text-align: left; } body.page-home .work-card:nth-child(n) { grid-column: span 12; } body.page-home .work-card:nth-child(2) .work-thumb, body.page-home .work-card:nth-child(7) .work-thumb { aspect-ratio: 3/2; } body.page-home #about { grid-template-columns: 1fr; gap: 2.5rem; } body.page-home .about-photo { max-width: 100%; aspect-ratio: 4/3; } body.page-home .about-tools { gap: 8px; } body.page-home .service-grid { grid-template-columns: 1fr; } body.page-home .service-item { border-right: none !important; padding-left: 0 !important; padding: 1.5rem 0; } body.page-home .features-header { grid-template-columns: 1fr; gap: 1rem; } body.page-home .feature-row { grid-template-columns: 2rem 1fr; } body.page-home .feature-en { display: none; } }