/* LPF design system v1 — docs/concept/LPF_デザインシステム.md
   Shared by renewal and legacy pages; product images retain their own colors. */
:root {
  color-scheme: dark;
  --bg-base:#03090b; --bg-deep:#041114; --surface:#0b1b20; --surface-hover:#102a30;
  --text-primary:#fff; --text-secondary:#d5e4e7; --text-muted:#a8bec3;
  --accent-primary:#00dcc6; --accent-cyan:#00bfea; --accent-mint:#4fffd5;
  --text-on-accent:#041114; --border-subtle:#23444c; --border-control:#6a9099;
  --r-paper:var(--bg-base); --r-surface:var(--surface); --r-ink:var(--text-primary);
  --r-muted:var(--text-muted); --r-line:var(--border-subtle);
  --brand-gradient:linear-gradient(100deg,#00bfea 0%,#00dcc6 55%,#4fffd5 100%);
}
body.r-site,body[data-renewal-legacy] {
  background:var(--bg-base); color:var(--text-primary);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.8; letter-spacing:0;
}
.r-wrap {width:min(calc(100% - 64px),1200px)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
.pa-section a:focus-visible,.pa-jump a:focus-visible {
  outline:2px solid var(--accent-mint); outline-offset:3px;
}
.r-site h1,.r-site h2,.r-site h3 {letter-spacing:0; color:var(--text-primary)}
.r-site h2 {font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.35}
.r-site h3 {font-weight:700;line-height:1.45}
.r-header {background:rgba(3,9,11,.97);color:var(--text-primary);border-color:var(--border-subtle)}
.r-header-row {height:96px}
.r-brand {color:var(--text-primary)}
.r-brand small {color:var(--text-secondary)}
.r-mark {background:var(--surface);color:var(--accent-mint);border:1px solid var(--border-subtle);border-radius:8px}
.r-nav a {font-size:12px}
.r-nav a[aria-current],.r-nav a:hover,.r-nav a[aria-current="location"] {border-bottom-color:var(--accent-primary)}
.r-nav a:last-child {background:var(--accent-primary);color:var(--text-on-accent);border-radius:8px;padding:14px 24px}
.r-nav a:last-child:hover {background:var(--accent-mint)}
.r-menu {color:var(--text-primary);border-color:var(--border-control);border-radius:8px}
.r-mobile a {color:var(--text-primary)}
.r-skip {background:var(--accent-primary);color:var(--text-on-accent)}
.r-label {color:var(--accent-primary);font-size:12px;letter-spacing:.14em}
.r-hero,.r-page-hero {position:relative;isolation:isolate;background:var(--bg-deep);overflow:hidden}
.r-hero>.r-wrap,.r-page-hero>.r-wrap {position:relative;z-index:1}
/* Static light ribbons stay at the edges, behind the quiet reading area. */
.r-hero::before,.r-page-hero::before {
  content:"";position:absolute;z-index:-1;pointer-events:none;width:1000px;height:360px;
  left:-380px;top:-320px;border-radius:50%;transform:rotate(-23deg);
  border-bottom:2px solid var(--accent-primary);
  box-shadow:0 8px 0 rgba(0,220,198,.12),0 18px 40px rgba(0,191,234,.18);
}
.r-hero::after,.r-page-hero::after {
  content:"";position:absolute;z-index:-1;pointer-events:none;width:940px;height:360px;
  right:-520px;bottom:-235px;border-radius:50%;transform:rotate(-28deg);
  border-top:3px solid var(--accent-primary);
  box-shadow:0 -9px 0 rgba(0,220,198,.13),0 -24px 60px rgba(0,191,234,.14);
}
.r-home-simple .r-hero {padding-top:96px}
.r-hero h1 {font-size:clamp(40px,5vw,72px);font-weight:900;line-height:1.28;letter-spacing:0}
.r-accent {color:var(--accent-primary);background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.r-hero-copy {font-size:18px;line-height:1.8;color:var(--text-secondary);margin-top:32px!important}
.r-home-simple .r-hero-copy {max-width:800px}
.r-home-simple .r-hero-foot {padding-top:64px;padding-bottom:24px}
.r-hero-foot {color:var(--text-muted)}
.r-button {background:var(--accent-primary);color:var(--text-on-accent)!important;border:1px solid var(--accent-primary);border-radius:8px;min-height:48px;font-size:15px;padding:16px 24px;font-weight:700;transition:background .18s,color .18s}
.r-button:hover {background:var(--accent-mint);border-color:var(--accent-mint)}
.r-button:active {filter:brightness(.9)}
.r-button.r-secondary {background:var(--surface);color:var(--text-primary)!important;border-color:var(--border-control)}
.r-button.r-secondary:hover {background:var(--surface-hover)}
.r-white,.r-neutral {background:var(--bg-base)}
.r-section,.r-home-simple .r-section {padding:96px 0}
.r-section+.r-section {border-top:1px solid var(--border-subtle)}
.r-intro {color:var(--text-secondary);font-size:17px;line-height:1.8}
.r-small,.r-block {font-size:14px;color:var(--text-muted)}
.r-services {gap:24px}
.r-service,.r-product,.r-contact-categories article {background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px}
.r-service {padding:32px}
.r-service-no,.r-home-simple .r-service-no {font:600 36px/1.3 Arial,sans-serif;color:var(--accent-primary);margin-bottom:32px}
.r-service-no span {color:var(--accent-primary)}
.r-service h3 {font-size:22px}
.r-service>p:not(.r-label),.r-service ul,.r-product-body>p:not(.r-status),.r-contact-categories p,.r-about-layout p:not(.r-label),.r-contact-layout p,.r-detail-options p,.r-detail-two p,.r-detail-two li {font-size:16px;color:var(--text-secondary);line-height:1.8}
.r-link {color:var(--accent-cyan)!important;border-bottom-color:var(--accent-cyan);font-size:14px;text-decoration:underline;text-underline-offset:5px}
.r-link:hover,.r-news a:hover,.r-related a:hover {color:var(--accent-mint)!important}
.r-product-body,.r-home-simple .r-product-body {padding:32px}
.r-product-visual {color:var(--text-primary);background:var(--surface-hover)}
.r-product-visual.skate,.r-product-visual.art,.r-product-visual.brow {background:var(--surface-hover)}
.r-status {background:var(--bg-deep);color:var(--text-secondary);font-size:12px;border-radius:4px}
.r-status::before {background:var(--accent-primary)}
.r-case-tagline,.r-case dd {color:var(--text-secondary)}
.r-case h3 {font-weight:700}
.r-contact-categories article {padding:32px}
.r-contact-layout .r-small {font-size:14px}
.r-process li {border-top-color:var(--border-subtle)}
.r-process li>span,.r-detail-steps span {color:var(--accent-primary)}
.r-process p {font-size:16px;color:var(--text-secondary)}
.r-news a {font-size:16px}
.r-news time {font-size:12px}
.r-solutions a:hover {background:var(--surface-hover)}
.r-page-hero {padding:80px 0}
.r-page-hero h1,.r-detail-hero h1 {font-size:clamp(32px,4vw,56px);line-height:1.3;font-weight:800}
.r-detail-options h3,.r-detail-steps h3 {font-size:22px}
.r-footer {background:var(--bg-deep);color:var(--text-primary)}
.r-footer-top p {font-size:14px;color:var(--text-secondary)}
.r-footer-sub,.r-footer-top nav {font-size:12px}
.r-qr img {color-scheme:light;border-radius:8px}
/* Legacy pages use both Tailwind utilities and phase2 CSS. Override the shared
   UI roles, never images or product-specific logo assets. */
body[data-renewal-legacy] {--ink:#fff;--paper:#03090b;--chalk:#0b1b20;--acid:#00dcc6;--sky:#0b1b20;--flame:#0b1b20;--grape:#0b1b20;--line:#00dcc6;--max:1200px}
[data-renewal-legacy] main .bg-paper,[data-renewal-legacy] main .bg-chalk {background:var(--bg-base)!important;color:var(--text-primary)}
[data-renewal-legacy] main .bg-acid,[data-renewal-legacy] main .acid,
[data-renewal-legacy] main .bg-sky,[data-renewal-legacy] main .sky,
[data-renewal-legacy] main .bg-grape,[data-renewal-legacy] main .grape,
[data-renewal-legacy] main .bg-flame,[data-renewal-legacy] main .flame,
[data-renewal-legacy] main .bg-ink,[data-renewal-legacy] main .dark {background:var(--surface)!important;color:var(--text-primary)!important}
[data-renewal-legacy] main .text-ink {color:var(--text-primary)!important}
[data-renewal-legacy] main .text-acid {color:var(--accent-primary)!important}
[data-renewal-legacy] main [class*="border-ink"],
[data-renewal-legacy] main [class*="border-chalk"] {border-color:var(--border-subtle)!important;border-width:1px}
[data-renewal-legacy] main .panel,[data-renewal-legacy] main .panel-dark,[data-renewal-legacy] main .card,
[data-renewal-legacy] main .step,[data-renewal-legacy] main .lab-panel,[data-renewal-legacy] main .price-card,
[data-renewal-legacy] main .product-facts>div {background:var(--surface)!important;color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:12px!important;box-shadow:none!important}
[data-renewal-legacy] main .btn-light,[data-renewal-legacy] main .btn-line,
[data-renewal-legacy] main .btn-dark,[data-renewal-legacy] main .btn {background:var(--accent-primary)!important;color:var(--text-on-accent)!important;border:1px solid var(--accent-primary)!important;border-radius:8px!important;min-height:48px;transition:background .18s}
[data-renewal-legacy] main .btn-light:hover,[data-renewal-legacy] main .btn-line:hover,
[data-renewal-legacy] main .btn:hover {background:var(--accent-mint)!important}
[data-renewal-legacy] main .btn-light::after,[data-renewal-legacy] main .btn-line::after {color:var(--text-on-accent)!important}
[data-renewal-legacy] main .tag,[data-renewal-legacy] main .badge,[data-renewal-legacy] main .meta span {background:var(--surface);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:4px}
[data-renewal-legacy] main .hero,[data-renewal-legacy] main .article-hero {background:var(--bg-deep)!important;color:var(--text-primary)!important;border-color:var(--border-subtle)}
[data-renewal-legacy] main .hero-title,[data-renewal-legacy] main .hero h1,[data-renewal-legacy] main .big-title {font-weight:900;line-height:1.3}
[data-renewal-legacy] main .section-title {font-weight:800;line-height:1.35}
[data-renewal-legacy] main .product-facts dt {color:var(--text-muted)}
[data-renewal-legacy] main a:not([class*="btn"]):not(.r-button) {text-underline-offset:5px}
[data-renewal-legacy] main .article a {color:var(--accent-cyan);text-decoration:underline}
[data-renewal-legacy] main code {background:var(--surface-hover);color:var(--text-secondary)}
[data-renewal-legacy] main [class*="text-ink/"] {color:var(--text-secondary)!important}
[data-renewal-legacy] main [class*="bg-white"] {background:var(--surface)!important}
.pa-section {background:var(--bg-base);color:var(--text-primary)}
.pa-label {color:var(--accent-primary)}
.pa-note,.pa-figure figcaption,.pa-related span {color:var(--text-muted)}
.pa-figure figcaption a,.pa-related a {color:var(--accent-cyan)}
.pa-image-link,.pa-points article,.pa-related {border-color:var(--border-subtle)}
.pa-image-link {border-radius:12px;background:#fff;color-scheme:light}
@media(max-width:959px){.r-services,.r-home-simple .r-home-products {grid-template-columns:1fr}.r-service {padding:24px}}
@media(max-width:800px){
 .r-wrap {width:calc(100% - 40px)}
 .r-header-row {height:80px}
 .r-home-simple .r-hero {padding-top:64px}
 .r-hero h1 {font-size:clamp(32px,5.1vw,40px);line-height:1.3}
 .r-hero-copy {font-size:17px}
 .r-home-simple .r-hero-foot {padding-top:48px}
 .r-section,.r-home-simple .r-section,.r-service-detail .r-section {padding:64px 0}
 .r-page-hero {padding:56px 0}
 .r-page-hero h1,.r-detail-hero h1 {font-size:32px}
 .r-product-body,.r-home-simple .r-product-body,.r-contact-categories article {padding:24px}
 .r-product-grid {grid-template-columns:1fr}
 .r-service h3 {font-size:22px}
 .r-intro,.pa-intro {font-size:17px}
 .r-hero::after {right:-730px;opacity:.7}
 .r-process {grid-template-columns:1fr}
 .r-hero-foot {flex-wrap:wrap;gap:16px}
 .r-hero-foot a {font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Normalize the remaining legacy accent utilities, including alpha variants. */
[data-renewal-legacy] main .text-grape,[data-renewal-legacy] main .text-sky,
[data-renewal-legacy] main .text-flame {color:var(--accent-primary)!important}
[data-renewal-legacy] main [class*="bg-acid/"],
[data-renewal-legacy] main [class*="bg-sky/"],
[data-renewal-legacy] main [class*="bg-flame/"],
[data-renewal-legacy] main [class*="bg-grape/"] {background:var(--surface-hover)!important;color:var(--text-primary)!important}
@media(min-width:801px){.r-hero::after {right:-650px;bottom:-270px}}

/* Approved outlined wordmark: white reverse, original contours and aspect ratio. */
.r-brand-logo {display:block;width:180px;height:auto}
.r-brand {flex-shrink:0;padding:16px}
.r-header-row {height:136px}
.r-footer .r-brand {display:inline-flex}
@media(max-width:800px){.r-header-row{height:128px}.r-brand-logo{width:180px}}
html{scroll-padding-top:152px}.r-anchor{scroll-margin-top:152px}
@media(max-width:800px){html{scroll-padding-top:144px}.r-anchor{scroll-margin-top:144px}}

/* Consolidated services: readable prices and progressively enhanced FAQs. */
.r-price-note{margin:32px 0;padding:24px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px}
.r-price-note p{color:var(--text-secondary);margin-top:16px}.r-price-note strong{color:var(--text-primary)}
.r-faq{margin-top:32px;max-width:880px}.r-faq details{border-bottom:1px solid var(--border-subtle);padding:24px 0}
.r-faq summary{font-size:18px;font-weight:700;cursor:pointer;line-height:1.6}.r-faq p{color:var(--text-secondary);margin:20px 0 0;line-height:1.8}
.r-sitemap-groups{display:grid;grid-template-columns:1fr 1fr;gap:48px}.r-sitemap-groups h2{font-size:26px}.r-sitemap-groups ul{list-style:none;padding:0;margin:20px 0 0}.r-sitemap-groups a{display:inline-block;color:var(--accent-cyan);padding:8px 0;text-decoration:underline}
#website,#media,#quiz,#learning,#pricing,#process,#faq,#guide{scroll-margin-top:152px}
@media(max-width:800px){.r-sitemap-groups{grid-template-columns:1fr;gap:32px}#website,#media,#quiz,#learning,#pricing,#process,#faq,#guide{scroll-margin-top:144px}}

/* Product-led home: three location services, learning sites, AI, then client work. */
.r-simple-feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.r-simple-feature p{font-size:17px;line-height:1.8;color:var(--text-secondary);margin:0 0 24px}
.r-product-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:auto}
.r-product-detail{font-size:14px;color:var(--text-secondary)!important;text-underline-offset:5px}
.r-home-simple .r-product-actions .r-link{margin:0}
.r-nav{gap:24px}.r-nav a{font-family:inherit;font-size:13px;letter-spacing:0}
.r-mobile a,.r-footer-top nav{font-family:inherit;letter-spacing:0}
.r-home-simple .r-hero-foot{padding-top:40px}
@media(max-width:800px){.r-simple-feature{grid-template-columns:1fr;gap:24px}.r-product-actions{gap:16px}.r-home-simple .r-section{padding:56px 0}}
/* Six-item corporate navigation remains readable before the mobile breakpoint. */
@media(min-width:801px) and (max-width:1100px){.r-nav{gap:12px}.r-nav a{font-size:11px}.r-nav a:last-child{padding:12px 16px}}