/* ========================================================= Sync Lab UI — page-scoped stylesheet (no cross-page bleed) Requires: ========================================================= */ /* ===== Design Tokens ===== */ :root{ --ink:#0d1b16; --muted:#6b7f78; --bg:#f6faf8; --panel:#ffffff; --line:#e7eee9; --green:#29b36b; --accent: var(--green); --radius:14px; --shadow: 0 10px 30px rgba(0,0,0,.08); --shadow-2: 0 18px 60px rgba(0,0,0,.12); } /* ===== Base (scoped) ===== */ html,body{ height:100%; } body.lab{ margin:0; background:linear-gradient(#fbfffd, var(--bg)); color:var(--ink); font-family:"Zen Kaku Gothic New", system-ui, -apple-system, "Noto Sans JP", sans-serif; line-height:1.65; } .lab *, .lab *::before, .lab *::after{ box-sizing:border-box; } .lab .wrap{ width:min(1120px, 92vw); margin-inline:auto; } .lab .section{ padding: clamp(40px,6vw,80px) 0; } .lab .section h2{ font-size: clamp(22px,3vw,28px); margin:0 0 16px; border-bottom: 2px solid color-mix(in oklab, var(--green) 18%, #dff3e9 82%); padding-bottom: 6px; } /* ===== Header ===== */ .lab .lab-header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background: color-mix(in oklab, #ffffff 80%, transparent); backdrop-filter:saturate(180%) blur(8px); } .lab .lab-header::after{ content:""; display:block; height:2px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--green) 22%, #ffffff 78%), transparent); } .lab .lab-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; } .lab .brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; } .lab .brand-mark{ width:28px; height:28px; } .lab .brand-text{ font: 700 18px/1 "Poppins", system-ui; letter-spacing:.02em; } .lab .nav{ display:flex; gap:14px; align-items:center; } .lab .nav a{ padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--ink); font-weight:700; } .lab .nav a:hover{ background:#fff; box-shadow:var(--shadow); } .lab .nav .apply-link{ background:var(--accent); color:#fff; box-shadow:var(--shadow); } .lab .nav .is-active{ outline:2px solid color-mix(in oklab, var(--accent) 30%, #fff 70%); } .lab .nav-toggle{ display:none; border:0; background:transparent; width:40px; height:40px; border-radius:8px; } .lab .nav-toggle span{ display:block; height:2px; background:var(--ink); margin:7px 6px; } /* ===== Buttons ===== */ .lab .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:11px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:800; text-decoration:none; box-shadow:var(--shadow); transition:.2s; } .lab .btn:hover{ transform: translateY(-1px); box-shadow:var(--shadow-2); } .lab .btn.ghost{ background:#fff; } .lab .btn.accent{ background:var(--accent); color:#fff; border-color: color-mix(in oklab, var(--accent) 70%, #000 6%); } .lab .btn.white{ background:#fff; } /* ===== Hero (top) ===== */ .lab .hero{ position: relative; isolation:isolate; overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(1200px 480px at 20% -10%, rgba(41,179,107,.18), transparent 60%), linear-gradient(135deg, #ffffff 0%, #effaf4 40%, #e7f7ef 100%); } .lab .hero-bg{ position: absolute; inset: 0; z-index: 1; } .lab .hero-img{ width: 100%; height: 100%; object-fit: cover; animation: heroFadeIn 2s ease-in-out forwards; opacity: 0; } @keyframes heroFadeIn { to { opacity: 1; transform: none; } } .lab .hero-content{ position: relative; z-index: 2; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.6); max-width: 720px; margin-left: clamp(5%, 8vw, 120px); text-align: left; } .lab .hero-copy h1{ font-size: clamp(34px, 6vw, 56px); letter-spacing:.01em; margin:0 0 10px; } .lab .hero-copy h1 span{ color:var(--accent); } .lab .hero-copy p{ font-size: clamp(15px,2.2vw,18px); color:#222; font-weight:600; text-shadow: -1px -1px 2px rgba(255,255,255,0.95), 1px -1px 2px rgba(255,255,255,0.95), -1px 1px 2px rgba(255,255,255,0.95), 1px 1px 2px rgba(255,255,255,0.95); margin:0 0 14px; } .lab .hero-cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; } /* ===== News ===== */ .lab .section.news .wrap{ max-width: 920px; padding-top: 12px; padding-bottom: 6px; } .lab .news-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; } .lab .news-list li{ padding:18px 20px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.04); } .lab .news-thumb{ display:none !important; } .lab .news-main{ display:grid; gap:10px; align-content:start; } .lab .news-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; color:#6b7280; margin-bottom:2px; } .lab .news-title{ margin:2px 0 6px; font-size:20px; line-height:1.5; color:#1f2937; font-weight:700; } .lab .news-text{ color:#374151; line-height:1.9; letter-spacing:.01em; } .lab .news-text p + p{ margin-top:.75em; } .lab .news-text img{ display:block; max-width:100%; height:auto; margin:10px 0 0; border-radius:8px; } .lab .tag{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:#eefaf3; color:#0c5132; font-weight:800; border:1px solid #d6f3e4; } .lab .tag.accent{ background:#c9ffe6; border-color:#b3f4d6; } /* ===== Values ===== */ .lab .values .cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; } .lab .values .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .lab .values .card h3{ margin:0 0 6px; } /* ===== CTA band ===== */ .lab .cta-band{ background: linear-gradient(90deg, color-mix(in oklab, var(--green) 16%, #fff 84%), #fff); border-block:1px solid var(--line); } .lab .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block: clamp(20px,3vw,34px); } .lab .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; } /* ===== Footer ===== */ .lab .lab-footer{ border-top:1px solid var(--line); background:#fff; } .lab .lab-footer .wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; flex-wrap:wrap; gap:10px; } .lab .foot-nav{ display:flex; gap:12px; } .lab .foot-nav a{ color:var(--muted); text-decoration:none; } .lab .copy{ color:var(--muted); } /* ===== Animation helpers ===== */ .lab .fadein{ opacity:0; transform: translateY(10px); } .lab .is-in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; } /* ===== Responsive (global) ===== */ @media (max-width:1080px){ .lab .hero{ height:72vh; } } @media (max-width:760px){ .lab .nav{ position:fixed; inset:60px 12px auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:var(--shadow-2); display:none; flex-wrap:wrap; z-index:60; } .lab .nav.is-open{ display:flex; } .lab .nav-toggle{ display:inline-block; } .lab .values .cards{ grid-template-columns:1fr; } .lab .hero-content{ margin-left:auto; margin-right:auto; text-align:center; } .lab .hero-cta{ justify-content:center; } } /* ========================================================= About page (scoped by .about-page) ========================================================= */ .lab.about-page .wrap.narrow{ width:min(920px,92vw); } .lab.about-page .wrap.narrow.center{ text-align:center; } .lab.about-page .subcap{ margin:6px 0 18px; color:#6b7f78; font-size:14px; letter-spacing:.02em; } .lab.about-page .about-section{ padding-block: clamp(60px,10vw,120px); } /* About HERO */ .lab.about-page .about-hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); } .lab.about-page .about-hero .hero-content{ color:white; text-shadow:0 2px 8px rgba(0,0,0,.6); max-width:820px; margin-left:clamp(5%,8vw,120px); text-align:left; padding-block: clamp(64px,10vw,140px); } .lab.about-page .about-hero .hero-copy h1{ margin:0 0 8px; font-size:clamp(30px,5.6vw,44px); letter-spacing:.01em; } .lab.about-page .about-hero .hero-copy .subtitle{ font-weight:700; background: color-mix(in oklab, var(--green) 8%, #fff 92%); color:#0c5132; border:1px solid #d8efe3; border-radius:999px; padding:6px 12px; display:inline-block; } .lab.about-page .about-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(1000px 380px at 18% -10%, rgba(41,179,107,.16), transparent 60%), url("./assets/hero-mosaic.png") center/cover no-repeat, linear-gradient(135deg,#ffffff 0%,#effaf4 40%,#e7f7ef 100%); filter:saturate(120%) blur(2px); } /* WHY */ .lab.about-page .why-list{ margin:0; padding:0; list-style:none; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); } .lab.about-page .why-list li{ display:grid; grid-template-columns:auto 1fr; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); } .lab.about-page .why-list .ic{ width:28px; height:28px; display:inline-grid; place-items:center; color:#0c5132; background:#eefaf3; border:1px solid #d6f3e4; border-radius:999px; } /* METHOD（GKKP） */ .lab.about-page #method{ position:relative; } .lab.about-page .gkkp-slab{ position:relative; overflow:hidden; border:1px solid var(--line); background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding: clamp(18px,3vw,24px); } .lab.about-page .gkkp-grid{ position:absolute; inset:-20% -10% -10% -10%; z-index:0; pointer-events:none; opacity:.25; background-image: linear-gradient(transparent 31px, rgba(12,81,50,.12) 32px), linear-gradient(90deg, transparent 31px, rgba(12,81,50,.12) 32px); background-size:32px 32px; } .lab.about-page .gkkp-logo{ position:relative; z-index:1; font:600 18px/1 "Poppins", system-ui; letter-spacing:.35em; color:#0c5132; margin-bottom:10px; } .lab.about-page .gkkp-logo span{ letter-spacing:.08em; font-weight:700; margin-left:.4em; color:#13322B; } /* SERVICES */ .lab.about-page .svc-grid{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); } .lab.about-page .svc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .lab.about-page .svc-card h3{ margin:0 0 6px; } /* TARGET */ .lab.about-page .target-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .lab.about-page .target-list li{ display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); line-height:1.8; } .lab.about-page .target-list .ic{ flex-shrink:0; width:30px; height:30px; display:grid; place-items:center; color:#0c5132; background:#eefaf3; border:1px solid #d6f3e4; border-radius:999px; margin-top:2px; } .lab.about-page .target-list li strong{ color:#0c5132; font-weight:700; } /* MISSION */ .lab.about-page #mission{ background: linear-gradient(135deg, #ffffff 0%, #effaf4 40%, #e7f7ef 100%); } .lab.about-page #mission .wrap p{ line-height:1.95; letter-spacing:.02em; } /* JOIN THE LAB */ .lab.about-page .join-section{ background:#f3fbf6; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .lab.about-page .join-head h2{ margin:0 0 6px; font-size: clamp(22px, 3.6vw, 28px); border-bottom: 2px solid #d8efe3; padding-bottom:6px; } .lab.about-page .join-head .jp{ font-weight:700; color:#0c5132; } .lab.about-page .join-block{ margin-top:22px; } .lab.about-page .join-h3{ margin:0 0 10px; font-size: clamp(18px, 2.8vw, 22px); color:#1f2937; letter-spacing:.01em; } /* Pricing */ .lab.about-page .pricing-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-top:12px; } .lab.about-page .price-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:grid; gap:8px; align-content:start; } .lab.about-page .price-card h4{ margin:0; font-size:18px; } .lab.about-page .price-card .desc{ margin:0; color:#6b7f78; line-height:1.7; } .lab.about-page .price-card .price{ margin:4px 0 0; font:700 22px/1.2 "Zen Kaku Gothic New", system-ui; color:#0c5132; } .lab.about-page .price-card .price span{ font-size:28px; } .lab.about-page .price-card .price .per{ font-size:14px; margin-left:4px; color:#1f2937; } .lab.about-page .price-card.accent{ outline:2px solid color-mix(in oklab, var(--green) 28%, #fff 72%); } .lab.about-page .price-card .badge{ position:absolute; top:10px; right:10px; font-weight:800; font-size:12px; background:#eefaf3; border:1px solid #d6f3e4; color:#0c5132; border-radius:999px; padding:4px 8px; } /* Benefits */ .lab.about-page .benefits-grid{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,1fr); } .lab.about-page .benefits-grid li{ display:grid; grid-template-columns:auto 1fr; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); } .lab.about-page .benefits-grid .ic{ width:28px; height:28px; display:grid; place-items:center; color:#0c5132; background:#eefaf3; border:1px solid #d6f3e4; border-radius:999px; flex-shrink:0; } .lab.about-page .benefits-grid strong{ color:#0c5132; } .lab.about-page .benefits-grid p{ margin:.25em 0 0; line-height:1.8; } /* JOIN CTA */ .lab.about-page .join-cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px; } /* About Responsive */ @media (max-width:1080px){ .lab.about-page .why-list{ grid-template-columns:1fr; } .lab.about-page .svc-grid{ grid-template-columns:repeat(2,1fr); } .lab.about-page .pricing-grid{ grid-template-columns:1fr; } .lab.about-page .benefits-grid{ grid-template-columns:1fr; } } @media (max-width:760px){ .lab.about-page .about-hero .hero-content{ margin-left:auto; margin-right:auto; text-align:center; } .lab.about-page .svc-grid{ grid-template-columns:1fr; } } /* ========================================================= Apply page (scoped by .apply-page) ========================================================= */ .lab.apply-page .about-section{ padding-block: clamp(60px,10vw,120px); } .lab.apply-page .subcap{ margin:6px 0 18px; color:#6b7f78; font-size:14px; letter-spacing:.02em; } .lab.apply-page .about-hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); } .lab.apply-page .about-hero .hero-content{ color:white; text-shadow:0 2px 8px rgba(0,0,0,.6); max-width:820px; margin-left:clamp(5%,8vw,120px); text-align:left; padding-block: clamp(64px,10vw,140px); } .lab.apply-page .about-hero .hero-copy h1{ margin:0 0 8px; font-size:clamp(28px,5.6vw,40px); letter-spacing:.01em; } .lab.apply-page .about-hero .hero-copy .subtitle{ font-weight:700; background: color-mix(in oklab, var(--green) 8%, #fff 92%); color:#0c5132; border:1px solid #d8efe3; border-radius:999px; padding:6px 12px; display:inline-block; } .lab.apply-page .about-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(1000px 380px at 18% -10%, rgba(41,179,107,.16), transparent 60%), url("./assets/hero-mosaic.png") center/cover no-repeat, linear-gradient(135deg,#ffffff 0%,#effaf4 40%,#e7f7ef 100%); filter:saturate(120%) blur(2px); } /* trial emphasize */ .lab.apply-page .price-card.trial{ background:#f9fefb; border:1px dashed color-mix(in oklab, var(--green) 30%, #fff 70%); } .lab.apply-page .price-card.trial h4{ color:#0c5132; } .lab.apply-page .price-card.trial .note{ font-size:13px; color:#6b7f78; margin:6px 0 0; } /* flow */ .lab.apply-page .flow-steps{ counter-reset: step; list-style:none; margin:10px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(4,1fr); } .lab.apply-page .flow-steps li{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); min-height:120px; } .lab.apply-page .flow-steps li::before{ counter-increment: step; content: counter(step); display:inline-grid; place-items:center; width:28px; height:28px; margin-bottom:6px; border-radius:999px; font-weight:800; color:#0c5132; background:#eefaf3; border:1px solid #d6f3e4; } .lab.apply-page .flow-steps strong{ display:block; margin-bottom:4px; color:#1f2937; } /* faq */ .lab.apply-page details.faq{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px; box-shadow:var(--shadow); margin:10px 0; } .lab.apply-page details.faq > summary{ cursor:pointer; font-weight:700; color:#0c5132; list-style:none; } .lab.apply-page details.faq[open] > summary{ margin-bottom:8px; } /* Apply Responsive */ @media (max-width:1080px){ .lab.apply-page .flow-steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ .lab.apply-page .about-hero .hero-content{ margin-left:auto; margin-right:auto; text-align:center; } .lab.apply-page .flow-steps{ grid-template-columns:1fr; } } /* ========================================================= Members hero (common section used on member page) ========================================================= */ .lab .members-hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); padding-block: clamp(56px, 10vw, 120px); } .lab .members-hero .hero-content{ color:white; text-shadow:0 2px 8px rgba(0,0,0,.6); max-width:820px; margin-left:clamp(5%,8vw,120px); text-align:left; } .lab .members-hero .hero-copy h1{ margin:0 0 8px; font-size:clamp(28px,5.6vw,40px); } .lab .members-hero .hero-copy .subtitle{ font-weight:700; background: color-mix(in oklab, var(--green) 8%, #fff 92%); color:#0c5132; border:1px solid #d8efe3; border-radius:999px; padding:6px 12px; display:inline-block; } .lab .members-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(900px 400px at 20% -10%, rgba(41,179,107,.25), transparent 60%), linear-gradient(135deg, #dff3e9 0%, #e7f7ef 40%, #cdeee2 100%); filter: brightness(0.92) saturate(1.1); /* optional: uncomment to deepen contrast */ /* background-blend-mode: multiply; */ } /* ========================================================= Footer safety ========================================================= */ @media (prefers-reduced-motion: reduce){ .lab *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; } } /* About */ .lab.about-page .about-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(1000px 420px at 18% -10%, rgba(41,179,107,.28), transparent 62%), url("./assets/hero-mosaic.png") center/cover no-repeat, linear-gradient(135deg,#e1f3eb 0%, #e7f7ef 38%, #cfe9df 100%); filter: brightness(0.88) saturate(1.05) blur(2px); } /* Apply */ .lab.apply-page .about-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(1000px 420px at 18% -10%, rgba(41,179,107,.28), transparent 62%), url("./assets/hero-mosaic.png") center/cover no-repeat, linear-gradient(135deg,#e1f3eb 0%, #e7f7ef 38%, #cfe9df 100%); filter: brightness(0.88) saturate(1.05) blur(2px); } /* ========================================================= Global Compact Spacing Patch (append at end of lab.css) 全ページの余白を控えめに最適化 ========================================================= */ /* 1) セクション上下余白を全体で圧縮 */ .lab .section{ /* 旧: clamp(40px, 6vw, 80px) など → 統一してやや控えめに */ padding-block: clamp(36px, 5.2vw, 72px); } /* About/Apply の本文セクションもグローバルで詰める */ .lab.about-page .about-section, .lab.apply-page .about-section{ padding-block: clamp(40px, 5.6vw, 76px); } /* 2) 見出し下の余白を微調整（詰めすぎない） */ .lab .section h2{ margin: 0 0 12px; /* 旧: 16px */ padding-bottom: 4px; /* 旧: 6px */ border-bottom-width: 2px; } /* 3) 標準カード/リストの内側余白を微調整 */ .lab .values .card, .lab .svc-card, .lab .price-card, .lab .benefits-grid li, .lab .target-list li, .lab .news-list li{ padding: 14px; /* 旧: 16px or 18px 20px 等 */ } /* 4) グリッド間隔（gap）を少しだけ詰める */ .lab .news-list{ gap: 16px; } /* 旧: 20px */ .lab .values .cards{ gap: 12px; } /* 旧: 14px */ .lab.about-page .svc-grid{ gap: 12px; } /* 旧: 14px */ .lab.about-page .pricing-grid{ gap: 12px; }/* 旧: 14px */ .lab.about-page .benefits-grid{ gap: 10px; }/* 旧: 12px */ .lab.about-page .target-list{ gap: 12px; } /* 旧: 14px */ .lab.apply-page .flow-steps{ gap: 12px; } /* 旧: 14px */ /* 5) CTA・フッターなどの帯要素の高さを控えめに */ .lab .cta-inner{ padding-block: clamp(16px, 2.4vw, 28px); /* 旧: clamp(20px,3vw,34px) */ } .lab .lab-footer .wrap{ padding: 14px 0; /* 旧: 18px 0 */ } /* 6) HEROは視覚的主役のため基本維持。Members/About/Apply は微調整のみ */ .lab .members-hero{ padding-block: clamp(48px, 8.5vw, 96px); } /* 旧: clamp(56px,10vw,120px) */ .lab.about-page .about-hero .hero-content, .lab.apply-page .about-hero .hero-content{ padding-block: clamp(56px, 8vw, 112px); /* 旧: clamp(64px,10vw,140px) */ } /* 7) モバイル時のリズム微調整（さらに詰めたい時は値を-4px程度） */ @media (max-width:760px){ .lab .section{ padding-block: clamp(32px, 6vw, 60px); } .lab .cta-inner{ padding-block: clamp(14px, 3.5vw, 24px); } }