:root {
  --color-brand-dark: #d61518;
  --color-brand: #e60012;
  --color-brand-light: #ff4a50;
  --color-brand-pink: #fbeaec;
  --color-black: #000;
  --color-black-200: #202020;
  --color-black-300: #303030;
  --color-black-700: #707070;
  --color-black-c00: #c0c0c0;
  --color-gray-900: #111827;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50: #F9FAFB;
  --color-white: #fff;
  --wrap: 1180px;
  --font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  --font-heading: "M PLUS 1p", var(--font-ja);
  --font-latin: Sora, "Helvetica Neue", Arial, sans-serif;
  --font-xs: 0.75rem;    /* 12px */
  --font-sm: 0.875rem;     /* 14px */
  --font-base: 1rem;     /* 16px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.25rem;    /* 20px */
  --font-2xl: 1.5rem;    /* 24px */
  --font-3xl: 1.75rem;    /* 28px */
  --font-4xl: 2rem;    /* 32px */
  --font-8xl: 3rem;    /* 48px */
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-normal: .01em;
  --tracking-tight: -.02em;
  --tracking-wide: .2em;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --shadow-xsmall: 0 0 0.25rem rgba(0,0,0,.1);
  --shadow-small: 0 0.25rem 1rem rgba(0,0,0,.2);
  --shadow-card: 0 0.75rem 2rem rgba(0,0,0,.08);
  --shadow-raised: 0 1rem 3rem rgba(0,0,0,.1);
  --shadow-raised-dark: 0 1rem 3rem rgba(0,0,0,.48);
  --width-025: 0.25rem;     /* 4px */
  --width-05: 0.5rem;     /* 8px */
  --width-10: 1rem;     /* 16px */
  --width-15: 1.5rem;     /* 24px */
  --width-20: 2rem;     /* 32px */
  --width-25: 2.5rem;     /* 40px */
  --width-30: 3rem;     /* 48px */
  --width-35: 3.5rem;     /* 56px */
  --width-40: 4rem;     /* 64px */
  --width-45: 4.5rem;     /* 72px */
  --width-50: 5rem;     /* 80px */
  --width-60: 6rem;     /* 96px */
  --width-70: 7rem;     /* 112px */
  --width-80: 8rem;     /* 128px */
  --width-90: 9rem;     /* 144px */
  --width-100: 10rem;     /* 160px */
}
/* base */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
html { font-size: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-ja);
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-bold); }
b, strong { font-weight: var(--weight-bold); }

.disclaimer { margin: var(--width-15) 0 0; color: var(--color-black-700); font-size: var(--font-xs); line-height: var(--leading-relaxed); }
.wrap { width: min(calc(100% - var(--width-30)), var(--wrap)); margin-inline: auto; }
.mobile-break { display: none; }
@media (max-width: 900px) {
  .pc-break { display: none; }
}
@media (max-width: 640px) {
  .wrap { width: min(calc(100% - var(--width-20)), var(--wrap)); }
  .mobile-break { display: block; }
}
/* header */
.site-header { position: relative; z-index: 20; background: var(--color-white); }
.header-utility { min-height: var(--width-50); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: var(--width-100); height: auto; object-fit: contain; }
.utility-nav { display: flex; gap: var(--width-15); font-size: var(--font-sm); }
.utility-nav a:hover, .utility-nav a:focus-visible { color: var(--color-brand); }
.mobile-contact-cta { display: none; }
.header-main { border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); }
.header-main-inner { min-height: var(--width-35); display: flex; align-items: center; justify-content: space-between; }
.page-label { color: var(--color-black); font-size: var(--font-sm); font-weight: var(--weight-bold);}
.nav-toggle { display: none; }
.primary-nav { display: flex; align-items: center; gap: 0 var(--width-20); color: var(--color-black); font-size: var(--font-sm); font-weight: var(--weight-bold); }
.primary-nav a:not(.nav-cta):hover { color: var(--color-brand); }
.primary-nav a:not(.nav-cta)[aria-current="page"] { color: var(--color-brand); }
.primary-nav a.nav-cta:hover { background: var(--color-black-200); }
.primary-nav a.nav-cta[aria-current="page"] { background: var(--color-black-200); }
.nav-cta { align-self: stretch; display: flex; align-items: center; padding: 0 var(--width-15); color: var(--color-white); background: var(--color-brand); border-radius: var(--width-20);}
@media (max-width: 900px) {
  .utility-nav { display: none; }
  .mobile-contact-cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--width-20); padding: 0 var(--width-15); color: var(--color-white); background: var(--color-brand); border-radius: var(--width-20); font-size: var(--font-sm); font-weight: var(--weight-bold); }
  .mobile-contact-cta:hover, .mobile-contact-cta:focus-visible, .mobile-contact-cta[aria-current="page"] { background: var(--color-black-200); }
  .header-utility { min-height: var(--width-40); }
  .brand-logo { width: var(--width-90); height: auto; }
  .header-main { position: relative; }
  .page-label { display: inline-flex; align-items: center; font-size: var(--font-base);}
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--width-10); min-height: var(--width-30); padding: 0; border: 0; color: var(--color-black); background: transparent; font: var(--weight-bold) var(--font-base)/var(--leading-none) var(--font-ja); cursor: pointer; }
  .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: var(--width-15); height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { position: absolute; left: 0; content: ""; }
  .nav-toggle-icon::before { top: -7px; }
  .nav-toggle-icon::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
  .primary-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: var(--width-10) max(var(--width-15), calc((100% - var(--wrap)) / 2)); border-bottom: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); font-size: var(--font-base); }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { display: flex; align-items: center; min-height: var(--width-40); padding: var(--width-10) 0; border-bottom: 1px solid var(--color-gray-200); }
  .primary-nav a:last-child { border-bottom: 0; }
  .primary-nav a.nav-cta { justify-content: center; margin: var(--width-15) 0 0; }
}
@media (max-width: 640px) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .primary-nav {padding: var(--width-10) max(var(--width-10), calc((100% - var(--wrap)) / 2));}
}
/* main > パン屑 */
.breadcrumb-wrap { border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-100); }
.breadcrumb { min-height: var(--width-35); display: flex; align-items: center; gap: var(--width-10); color: var(--color-gray-500); font-size: var(--font-xs); }
.breadcrumb a:hover { color: var(--color-brand); }
/* main > base */
.section { padding: var(--width-70) 0; }
.section h1, .section h2 { margin: 0 0 var(--width-20); color: var(--color-black); font-size: clamp(2rem, 0.815rem + 2.96vw, 3rem); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.section-heading { margin-bottom: var(--width-35); text-align: center; }
.section-heading p:last-child { max-width: 980px; margin: 0 auto; color: var(--color-black); font-size: var(--font-lg); }
.section-kicker { margin: 0 0 var(--width-10); color: var(--color-brand); font: var(--weight-bold) var(--font-sm)/var(--leading-tight) var(--font-latin); letter-spacing: var(--tracking-wide); }
@media (max-width: 640px) {
  .section { padding: var(--width-45) 0; }
  .section h1, .section h2 { overflow-wrap: anywhere; }
  .section-heading { margin-bottom: var(--width-20); text-align: left; }
}
/* main > index */
.skip-link { position: fixed; top: var(--width-05); left: var(--width-05); z-index: 1000; padding: var(--width-05) var(--width-10); background: var(--color-white); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.hero { position: relative; height: 100%; min-height: 700px; color: var(--color-white); background: var(--color-black); }
.hero-media, .hero-overlay { position: absolute; inset: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.8) contrast(1.05); }

.hero-comparison-labels { position: absolute; bottom: var(--width-20); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--width-10); width: 100%; pointer-events: none; padding: 0 var(--width-10); }
.hero-comparison-labels span { display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: var(--font-xs); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-align: center; }
.hero-comparison-labels span label { width: 100%; height: 100%; max-width: 200px; display: flex; align-items: center; justify-content: center; padding: var(--width-025) var(--width-05); min-height: var(--width-20);}
.hero-comparison-labels span.is-prototype label { background: rgba(230,0,18,.6); }
.hero-comparison-labels span.is-standard label { background: rgba(80, 80, 80, 0.6); }

.hero-content { position: absolute; top:35%; z-index: 2; left:50%; transform: translate(-50%, -50%);}

.hero h1 { display: grid; grid-template-columns: 1fr; gap: var(--width-05); margin: 0; line-height: var(--leading-snug); color: var(--color-gray-900); font-size: clamp(2.5rem, 0.618rem + 4.71vw, 3.5rem);}
.hero h1 strong { display: block; width: fit-content; max-width: 100%; font-weight: var(--weight-extrabold);}
.hero h1 strong.hero-title-realtime { letter-spacing: var(--tracking-tight);}
.hero h1 strong.hero-title-accent { margin-top: var(--width-10); font-size: clamp(2rem, 0.815rem + 2.96vw, 3rem); color: var(--color-brand);}
.hero h1 strong.hero-title-tech { margin-bottom: var(--width-05); font-size: clamp(2rem, 0.815rem + 2.96vw, 3rem);}
.hero h1 strong.hero-title-tech small {font-size: clamp(1.75rem, -0.132rem + 4.71vw, 2.75rem);}
.hero h1 strong span { display: inline; padding: 0 var(--width-10); background: rgba(255,255,255,.3); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero h1 sup, .technology h2 sup { position: relative; top: -.45em; font-size: var(--font-lg); line-height: 0; }
.hero-trademark { margin: var(--width-20) 0 0; max-width: 100%; color: var(--color-black); font-size: var(--font-sm); line-height: var(--leading-normal); }
.hero-trademark span { display: inline; padding: 0 var(--width-10); background: rgba(255,255,255,.2); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.intro p { margin: 0 0 var(--width-15); }
.challenge { color: var(--color-black); background: var(--color-white); }
.challenge h2 { color: var(--color-black); }
/* challenge editorial layout: scoped for straightforward rollback */
.challenge-story-layout { display: block; }
.challenge-story-layout h2 { border-bottom: 4px solid var(--color-black); margin: 0 0 var(--width-35); padding: 0 0 var(--width-20); text-align: left; position: relative; }
.challenge-story-layout h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px var(--color-brand);
    bottom: -4px;
    width: 40%;
}
.challenge-story-layout h3 { margin-bottom: var(--width-15); font-size: clamp(1.5rem, 0.907rem + 1.48vw, 2rem); line-height: var(--leading-normal);}
.challenge-story-layout p { margin: 0; color: var(--color-black); font-size: var(--font-lg); font-weight: var(--weight-regular);}
.challenge-story-layout strong { font-weight: var(--weight-bold); }
.challenge-story-layout .u-red { color: var(--color-brand); }
.challenge-problem-issues { border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); padding: var(--width-20);}
.challenge-problem-issues span {display: flex; align-items: center; gap:var(--width-05); color: var(--color-black); font-size: var(--font-xl); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
.challenge-problem-issues span svg { width: var(--width-20); fill:var(--color-brand)}
.challenge-problem-issues span + span { margin-top: var(--width-10); padding-top: var(--width-10); border-top: var(--color-gray-100) solid 1px;}
.challenge-explanation { margin: var(--width-45) 0 0; }
.challenge-explanation p + p { margin-top: var(--width-15); }
.challenge-explanation strong.challenge-closing { display: block; margin-top: var(--width-20); padding-top: var(--width-20); border-top: 2px solid var(--color-black); font-family: var(--font-heading); font-size: var(--font-xl); line-height: var(--leading-normal); }
/* end challenge editorial layout */
.technology { color: var(--color-white); background: var(--color-black); }
.tech-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); gap: var(--width-60); align-items: center; }
.tech-intro { align-self: start; }
.technology h2 { color: var(--color-white);}
.technology h2 strong { font-size: clamp(2.25rem, 0.769rem + 3.7vw, 3.5rem);}
.technology h2 span { font-size: clamp(1.5rem, 0.907rem + 1.48vw, 2rem);}
.technology .section-kicker.light { color: var(--color-brand); opacity: 1; }
.tech-intro > p:not(.section-kicker) { font-size: var(--font-lg); }
.tech-intro small { display: block; margin-top: var(--width-20); color: rgba(255,255,255,.6); }
.section-kicker.light { color: var(--color-white); opacity: .55; }
.feature-stack { border-top: 1px solid rgba(255,255,255,.2); }
.feature-stack article { display: grid; align-items: baseline; grid-template-columns: var(--width-30) 1fr; gap: var(--width-10); padding: var(--width-20) 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.feature-stack article > span { color: var(--color-brand); font: var(--weight-bold) var(--font-2xl)/var(--leading-tight) var(--font-latin); }
.feature-stack h3 { margin: 0 0 var(--width-05); font-size: var(--font-2xl); }
.feature-stack p { margin: 0; color: rgba(255,255,255,.8); font-size: var(--font-base); }
.technology-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--width-15); padding: var(--width-20); border: 1px solid rgba(255,255,255,.3); color: var(--color-white); background: var(--color-gray-900); font-size: var(--font-lg); font-weight: var(--weight-bold); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.technology-link:hover, .technology-link:focus-visible { border-color: var(--color-brand); background: rgba(230,0,18,.1); transform: translateY(-2px); }
.technology-link b { color: var(--color-brand-light); font: var(--weight-bold) var(--font-3xl)/var(--leading-none) var(--font-latin); }
.technology-link:hover b, .technology-link:focus-visible b { color: var(--color-white);}
.approach { background: var(--color-white); }
.approach-panel { overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); }
.approach-item { padding: var(--width-30); }
.approach-item + .approach-item { border-top: 1px solid var(--color-gray-200); }
.approach-item h2 { margin-bottom: var(--width-15); font-size: clamp(1.5rem, 0.907rem + 1.48vw, 2rem); }
.approach-item p { margin: 0 0 var(--width-15); }
.approach-item p:last-child { margin-bottom: 0; }
.approach-text-link { width: min(100%, 520px); }
.approach-button { width: min(100%, 520px); min-height: var(--width-50); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--width-15); padding: var(--width-15); color: var(--color-white); background: var(--color-brand); font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); transition: background .2s ease, transform .2s ease; }
.approach-button:hover, .approach-button:focus-visible { background: var(--color-black); transform: translateY(-2px); }
.approach-button b { font: var(--weight-bold) var(--font-xl)/var(--leading-none) var(--font-latin); }
.approach-schedule { max-width: 520px; margin: var(--width-15) 0; border-top: 1px solid var(--color-gray-200); }
.approach-schedule > div { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--color-gray-200); }
.approach-schedule dt, .approach-schedule dd { margin: 0; padding: var(--width-10); }
.approach-schedule dt { font-weight: var(--weight-bold); background: var(--color-gray-100); }
.approach-schedule dd { font-weight: var(--weight-bold); }
.approach-note { padding: var(--width-15); border-left: 4px solid var(--color-brand); background: var(--color-gray-100); font-size: var(--font-base); }
.approach-note small { color: var(--color-black-700); font-size: var(--font-sm); }
.approach-item p a { color: var(--color-brand); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 4px; }
.prototype { color: var(--color-white); background: linear-gradient(135deg, var(--color-gray-900), var(--color-black)); }
.heading-light h2 { color: var(--color-white); }
.prototype-concept { position: relative; margin: 0 0 var(--width-15); overflow: hidden; background: var(--color-gray-200); }
.prototype-concept picture { display: block; width: 100%; }
.prototype-concept img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.prototype-concept figcaption { position: absolute; bottom: 0; left: 0; display: grid; gap: var(--width-025); max-width: 520px; padding: var(--width-15); color: var(--color-white); background: rgba(0,0,0,.8); }
.prototype-concept figcaption b { font-size: var(--font-base); }
.prototype-concept figcaption span { color: var(--color-gray-200); font-size: var(--font-sm); }
.prototype-drawing { margin: 0 0 var(--width-15); overflow: hidden; background: var(--color-white); }
.prototype-drawing img { display: block; width: 100%; aspect-ratio: 20/9; object-fit: cover; }
.prototype-drawing figcaption { display: flex; justify-content: space-between; gap: var(--width-15); align-items: center; padding: var(--width-10) var(--width-15); border-top: 1px solid var(--color-gray-200); color: var(--color-black); background: var(--color-white); }
.prototype-drawing figcaption b { font-size: var(--font-xs); }
.prototype-drawing figcaption span { color: var(--color-black-700); font-size: var(--font-xs); text-align: right; }
.spec-panel { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--color-white); color: var(--color-black); }
.spec-main { padding: var(--width-30); }
.spec-label { margin: 0 0 var(--width-15); color: var(--color-brand); font: var(--weight-bold) var(--font-sm)/var(--leading-none) var(--font-latin); letter-spacing: var(--tracking-wide); }
.spec-main dl { margin: 0; }
.spec-main dl > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--width-15); padding: var(--width-10) 0; border-bottom: 1px solid var(--color-gray-200); }
.spec-main dt { color: var(--color-black); font-size: var(--font-base); }
.spec-main dd { margin: 0; font-size: var(--font-base); font-weight: var(--weight-bold); }
.spec-side { padding: var(--width-30); background: var(--color-gray-100); }
.spec-side h3 { margin: 0 0 var(--width-10); font-size: var(--font-lg); }
.spec-side h3:not(:first-child) { margin-top: var(--width-25); }
.spec-side ul { margin: 0; padding: 0; list-style: none; }
.spec-side li { display: grid; grid-template-columns: var(--width-30) 1fr; gap: var(--width-10); padding: var(--width-10) 0; border-bottom: 1px solid var(--color-gray-200); font-size: var(--font-base); }
.spec-side li b { color: var(--color-brand); }
.spec-side p { margin: 0; font-size: var(--font-base); }
.webui-link-button { display: flex; align-items: center; justify-content: space-between; gap: var(--width-15); min-height: var(--width-70); margin-top: var(--width-15); padding: var(--width-15); color: var(--color-white); background: var(--color-gray-900); transition: background .2s ease, transform .2s ease; }
.webui-link-button:hover, .webui-link-button:focus-visible { background: var(--color-brand); transform: translateY(-2px); }
.webui-link-button > span { display: grid; gap: var(--width-05); }
.webui-link-button small { color: var(--color-brand-light); font: var(--weight-bold) var(--font-xs)/var(--leading-none) var(--font-latin); letter-spacing: var(--tracking-wide); }
.webui-link-button:hover small, .webui-link-button:focus-visible small { color: var(--color-white); }
.webui-link-button b { font-size: var(--font-lg); line-height: var(--leading-normal); }
.webui-link-button strong { color: var(--color-brand-light); font: var(--weight-bold) var(--font-3xl)/var(--leading-none) var(--font-latin); }
.webui-link-button:hover strong, .webui-link-button:focus-visible strong { color: var(--color-white); }
.spec-note { margin: var(--font-base) 0 0; color: rgba(255,255,255,.7); font-size: var(--font-xs); }
.business-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--width-60); align-items: center; }
.business-layout > div > p:last-child { color: var(--color-black); }
.consult-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-gray-200); }
.consult-list li { position: relative; padding: var(--width-10) var(--width-10) var(--width-10) var(--width-20); border-bottom: 1px solid var(--color-gray-200); font-size: var(--font-base); font-weight: var(--weight-bold); }
.consult-list li::before { content: ""; position: absolute; top: 50%; left: var(--width-025); width: var(--width-10); height: 2px; background: var(--color-brand); transform: translateY(-50%); }
.inquiry { padding: var(--width-70) 0; color: var(--color-white); text-align: center; background: var(--color-brand); }
.inquiry h2 { margin: 0 0 var(--width-15); font-size: clamp(2.25rem, 0.769rem + 3.7vw, 3.5rem); line-height: var(--leading-snug); }
.inquiry > .wrap > p:not(.section-kicker) { color: rgba(255,255,255,.8); font-size: var(--font-lg); }
.inquiry-button { width: min(100%, 520px); min-height: var(--width-50); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--width-15); margin-top: var(--width-20); padding: var(--width-15); color: var(--color-brand); background: var(--color-white); font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); transition: color .2s ease, background .2s ease, transform .2s ease; }
.inquiry-button:hover, .inquiry-button:focus-visible { color: var(--color-white); background: var(--color-black); transform: translateY(-2px); }
.inquiry-button b { font: var(--weight-bold) var(--font-2xl)/var(--leading-none) var(--font-latin); }
@media (max-width: 900px) {
  .hero { min-height: 620px; }

  .tech-layout, .spec-panel, .business-layout { grid-template-columns: 1fr; }
  .tech-layout, .business-layout { gap: var(--width-40); }
}
@media (max-width: 640px) {

  .hero h1 { overflow-wrap: anywhere; }
  .hero-title-tech { white-space: normal; }
  .tech-layout { gap: var(--width-30); }
  .feature-stack article { grid-template-columns: var(--width-35) 1fr; }
  .technology-link { padding: var(--width-10); line-height: var(--leading-normal); }
  .approach-item { padding: var(--width-20) var(--width-15) ; }
  .approach-schedule > div { grid-template-columns: 1fr; }
  .approach-schedule dd { padding-top: 0; background: var(--color-gray-100); }
  .prototype-concept img { aspect-ratio: 16/9; object-position: center; }
  .prototype-concept figcaption { position: static; max-width: none; padding: var(--width-10); }
  .prototype-drawing img { aspect-ratio: 16/9; object-fit: cover; }
  .prototype-drawing figcaption { display: grid; gap: var(--width-025); }
  .prototype-drawing figcaption span { text-align: left; }
  .spec-main, .spec-side { padding: var(--width-20) var(--width-15); }
  .spec-main dl > div { grid-template-columns: 1fr; gap: var(--width-025); }
}
@media (max-width: 540px) {
  .hero { min-height: 660px; }

}
.hero-status { background: var(--color-brand-dark); }
.status-inner { padding:var(--width-15) 0; display: flex; align-items: center; gap: var(--width-20); color: var(--color-white); }
.status-inner strong { font: var(--weight-bold) var(--font-base)/var(--leading-none); letter-spacing: var(--tracking-wide); }
.status-inner span { font-weight: var(--weight-bold); line-height: var(--leading-normal);}
@media (max-width: 640px) {
  .status-inner { gap: var(--width-10);}
}
/* main > 「LISr-RISA」の概要 */
.seminar-slides { background: var(--color-gray-100); }
.slide-list { display: grid; gap: var(--width-35); max-width: 980px; margin: 0 auto; }
.slide-item { margin: 0; }
.slide-item > a { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); }
.slide-item img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--color-white); transition: transform .25s ease; }
.slide-item > a:hover img { transform: scale(1.04); }
.slide-expand { position: absolute; right: var(--width-10); bottom: var(--width-10); padding: var(--width-05) var(--width-10); color: var(--color-white); background: rgba(0,0,0,.6); font-size: var(--font-xs); font-weight: var(--weight-bold); }
.slide-item figcaption { display: flex; gap: var(--width-10); align-items: baseline; padding: var(--width-10) var(--width-025) 0; color: var(--color-black); font-size: var(--font-base); }
.slide-item figcaption b { color: var(--color-brand); font: var(--weight-bold) var(--font-base)/var(--leading-none) var(--font-latin); }
.seminar-external-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--width-10); margin-top: var(--width-50); }
.seminar-external-links a, .approach-text-link { display: flex; align-items: center; justify-content: space-between; gap: var(--width-15); min-height: var(--width-50); padding: var(--width-15); border: 1px solid var(--color-gray-200); background: var(--color-white); font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); transition: border-color .2s ease, transform .2s ease; }
.seminar-external-links a:hover, .seminar-external-links a:focus-visible, .approach-text-link:hover, .approach-text-link:focus-visible { border-color: var(--color-brand); transform: translateY(-2px); }
.seminar-external-links b, .approach-text-link b { flex: 0 0 auto; color: var(--color-brand); font: var(--weight-bold) var(--font-xl)/var(--leading-none) var(--font-latin); }
@media (max-width: 640px) {
  .seminar-slides .section-heading { text-align: left; }
  .slide-list { gap: var(--width-25); }
  .slide-item figcaption { line-height: var(--leading-normal); }
  .seminar-external-links { margin-top: var(--width-45); }
}
/* main > サンプル映像 */
.demo-section { background: var(--color-gray-100); }
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--width-15); }
.comparison-card { min-width: 0; overflow: hidden; color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-gray-200); box-shadow: var(--shadow-card); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.comparison-card:hover, .comparison-card:focus-visible { border-color: var(--color-brand); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.comparison-thumb { position: relative; display: block; overflow: hidden; background: var(--color-black); }
.comparison-thumb picture { display: block; width: 100%; }
.comparison-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: contain; transition: transform .3s ease; }
.comparison-card:hover .comparison-thumb img, .comparison-card:focus-visible .comparison-thumb img { transform: scale(1.04); }
.comparison-play { position: absolute; right: var(--width-10); bottom: var(--width-10); width: var(--width-30); height: var(--width-30); display: grid; place-items: center; padding-left: 2px; border-radius: 50%; color: var(--color-white); background: rgba(230,0,18,.9); box-shadow: var(--shadow-small); font-size: var(--font-base); }
.comparison-caption { display: grid; grid-template-columns: var(--width-20) minmax(0, 1fr) auto; gap: var(--width-05); align-items: baseline; min-height: var(--width-50); padding: var(--width-10); }
.comparison-caption b { color: var(--color-brand); font: var(--weight-bold) var(--font-base)/var(--leading-none) var(--font-latin); }
.comparison-caption > span { font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.comparison-modal { width: min(920px, calc(100% - var(--width-30))); max-width: none; padding: 0; border: 0; color: var(--color-white); background: transparent; }
.comparison-modal::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(3px); }
.comparison-modal-panel { position: relative; padding: var(--width-20); background: var(--color-black); box-shadow: var(--shadow-raised-dark); }
.comparison-modal-close { position: absolute; top: var(--width-10); right: var(--width-10); z-index: 2; width: var(--width-25); height: var(--width-25); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: var(--color-white); background: rgba(0,0,0,.6); font: var(--weight-regular) var(--font-3xl)/var(--leading-none) var(--font-latin); cursor: pointer; }
.comparison-modal-close:hover, .comparison-modal-close:focus-visible { background: var(--color-brand); border-color: var(--color-brand); }
.comparison-modal-heading { padding: 0 var(--width-35) var(--width-10) 0; }
.comparison-modal-heading p { margin: 0 0 var(--width-025); color: var(--color-brand); font: var(--weight-bold) var(--font-xs)/var(--leading-none) var(--font-latin); letter-spacing: var(--tracking-wide); }
.comparison-modal-heading h3 { margin: 0; font-size: var(--font-xl); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.comparison-modal video { display: block; width: 100%; aspect-ratio: 16/9; background: var(--color-black); }
@media (max-width: 640px) {
  .comparison-caption { min-height: var(--width-45);}
  .comparison-modal { width: calc(100% - var(--width-20)); }
  .comparison-modal-panel { padding-left: var(--width-10); padding-right: var(--width-10); }
  .comparison-modal-heading { padding-right: var(--width-30); }
  .comparison-modal-heading h3 { font-size: var(--font-base); }
}
/* common image modal */
.image-modal { width: min(1280px, calc(100% - var(--width-20))); height: min(92dvh, 1000px); max-width: none; max-height: 92dvh; padding: 0; border: 0; color: var(--color-white); background: transparent; }
.image-modal::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(3px); }
.image-modal-panel { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--color-black); box-shadow: var(--shadow-raised-dark); }
.image-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--width-15); min-height: var(--width-40); padding: var(--width-10) var(--width-15); border-bottom: 1px solid var(--color-black-300); }
.image-modal-header p { min-width: 0; margin: 0; font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.image-modal-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--width-10); }
.image-modal-actions button { min-height: var(--width-25); border: 1px solid var(--color-black-700); color: var(--color-white); background: var(--color-black-200); font-family: var(--font-ja); font-weight: var(--weight-bold); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.image-modal-actions button:hover, .image-modal-actions button:focus-visible { border-color: var(--color-brand); background: var(--color-brand); }
.image-modal-zoom { padding: 0 var(--width-10); font-size: var(--font-sm); }
.image-modal-close { width: var(--width-25); padding: 0; border-radius: 50%; font-size: var(--font-xl); line-height: var(--leading-none); }
.image-modal-view { min-height: 0; overflow: auto; display: grid; align-items: start; justify-items: center; padding: var(--width-10); background: var(--color-black-200); overscroll-behavior: contain; }
.image-modal-image { display: block; width: auto; max-width: 100%; height: auto; margin: auto; background: var(--color-white); }
.image-modal.is-actual-size .image-modal-image { max-width: none; margin: 0 auto; }
@media (max-width: 640px) {
  .image-modal { width: calc(100% - var(--width-10)); height: 94dvh; max-height: 94dvh; }
  .image-modal-header { gap: var(--width-10); padding: var(--width-05) var(--width-10); }
  .image-modal-header p { font-size: var(--font-sm); }
  .image-modal-actions { gap: var(--width-05); }
  .image-modal-view { padding: var(--width-05); }
}
/* main > Web UIパラメーター設定 */
.webui-intro { background: var(--color-white); }
.webui-heading { width: 100%; max-width: none; }
.webui-heading h1 { font-size: clamp(2.25rem, 0.769rem + 3.7vw, 3.5rem); line-height: var(--leading-snug); }
.webui-lead { width: 100%; max-width: none; margin: 0; font-size: var(--font-lg); font-weight: var(--weight-bold); line-height: var(--leading-relaxed); }
.webui-note { margin: var(--width-15) 0 0; color: var(--color-black-700); font-size: var(--font-xs); line-height: var(--leading-relaxed); }
.webui-connection-diagram { overflow: hidden; margin: var(--width-30) 0 0; border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); }
.webui-connection-diagram img { display: block; width: 100%; height: auto; }
.webui-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--width-35); background: var(--color-gray-200); border: 1px solid var(--color-gray-200); }
.webui-index a { display: grid; grid-template-columns: var(--width-20) 1fr; gap: var(--width-10); min-height: var(--width-70); padding: var(--width-15); background: var(--color-white); align-items: baseline; transition: background .2s ease, color .2s ease; }
.webui-index a:hover, .webui-index a:focus-visible { color: var(--color-white); background: var(--color-brand); }
.webui-index b { color: var(--color-brand); font: var(--weight-bold) var(--font-xl)/var(--leading-none) var(--font-latin); }
.webui-index a:hover b, .webui-index a:focus-visible b { color: var(--color-white); }
.webui-index span { display: grid; align-content: start; gap: var(--width-05); }
.webui-index strong { font-size: var(--font-xl); line-height: var(--leading-snug); }
.webui-index small { color: var(--color-black-700); font-size: var(--font-sm); line-height: var(--leading-normal); }
.webui-index a:hover small, .webui-index a:focus-visible small { color: rgba(255,255,255,.8); }
/* main > Web UIパラメーター設定 > ガイド */
.webui-section-heading { margin-bottom: var(--width-35); }
.webui-section-heading .section-kicker { margin-bottom: var(--width-10); }
.webui-section-heading > p { margin: var(--width-15) 0 0; color: var(--color-black); font-size: var(--font-lg); }
.webui-guide-section { color: var(--color-white); background: var(--color-gray-900); }
.webui-guide-section .webui-section-heading h2 { color: var(--color-white); }
.webui-guide-section .webui-section-heading > p { color: rgba(255,255,255,.7); }
.webui-guide-grid { display: grid; gap: var(--width-15); }
.webui-guide-card { padding: var(--width-30); color: var(--color-black); background: var(--color-white); }
.webui-guide-label { margin: 0 0 var(--width-05); color: var(--color-brand); font: var(--weight-bold) var(--font-xs)/var(--leading-none) var(--font-latin); letter-spacing: var(--tracking-wide); }
.webui-guide-card h3 { margin: 0 0 var(--width-10); color: var(--color-black); font-size: var(--font-4xl); line-height: var(--leading-snug); }
.webui-guide-card > p:not(.webui-guide-label):not(.webui-guide-note) { margin: 0 0 var(--width-20); color: var(--color-black); font-size: var(--font-base); }
.webui-guide-media-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--width-30); align-items: start; }
.webui-guide-media-layout.is-menu { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
.webui-guide-image { width: 100%; margin: 0; }
.webui-guide-image a { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-gray-100); box-shadow: var(--shadow-card); }
.webui-guide-image img { width: 100%; height: auto; }
.webui-guide-image a span { position: absolute; right: var(--width-05); bottom: var(--width-05); padding: var(--width-05); color: var(--color-white); background: rgba(0,0,0,.6); font-size: var(--font-xs); font-weight: var(--weight-bold); }
.webui-guide-image figcaption { padding: var(--width-05) 0 0; color: var(--color-black-700); font-size: var(--font-xs); font-weight: var(--weight-bold); text-align: center; }
.webui-guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--width-30); }
.webui-guide-columns h4 { margin: 0 0 var(--width-10); color: var(--color-black); font-size: var(--font-lg); }
.webui-function-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-gray-200); }
.webui-function-list li { display: grid; align-items: baseline; grid-template-columns: var(--width-20) 1fr; gap: var(--width-10); padding: var(--width-10) 0; border-bottom: 1px solid var(--color-gray-200); }
.webui-function-list li > b { color: var(--color-brand); font: var(--weight-bold) var(--font-base)/var(--leading-none) var(--font-latin); }
.webui-function-list li > span { display: grid; gap: var(--width-025); }
.webui-function-list strong { color: var(--color-black); font-size: var(--font-base); line-height: var(--leading-normal); }
.webui-function-list small { color: var(--color-black-700); font-size: var(--font-sm); line-height: var(--leading-normal); }
.webui-function-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--width-30); }
.webui-guide-note { margin: var(--width-15) 0 0; padding: var(--width-10); border-left: 3px solid var(--color-brand); color: var(--color-black); background: var(--color-gray-100); font-size: var(--font-sm); }
/* main > Web UIパラメーター設定 > ガイド > 項目説明 */
.webui-setting-section { scroll-margin-top: var(--width-15); background: var(--color-white); }
.webui-setting-section.is-soft { background: var(--color-gray-100); }
.webui-screen-grid { display: grid; gap: var(--width-15); align-items: start; }
.webui-screen-grid.is-five { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.webui-screen-grid.is-two { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: var(--width-20); }
.webui-screen-grid.is-single { grid-template-columns: minmax(0, 360px); justify-content: center; }
.webui-screen { min-width: 0; margin: 0; }
.webui-screen a { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-gray-100); box-shadow: var(--shadow-card); }
.webui-screen img { width: 100%; aspect-ratio: 9/16; object-fit: contain; transition: transform .25s ease; }
.webui-screen a:hover img, .webui-screen a:focus-visible img { transform: scale(1.04); }
.webui-screen a span { position: absolute; right: var(--width-05); bottom: var(--width-05); padding: var(--width-05); color: var(--color-white); background: rgba(0,0,0,.6); font-size: var(--font-xs); font-weight: var(--weight-bold); }
.webui-screen figcaption { padding: var(--width-05) 0 0; color: var(--color-black-700); font-size: var(--font-xs); font-weight: var(--weight-bold); text-align: center; }
.webui-specs { margin-top: var(--width-35); border-top: 1px solid var(--color-gray-400); border-bottom: 1px solid var(--color-gray-400);}
.webui-specs summary { position: relative; padding: var(--width-15) var(--width-35) var(--width-15) var(--width-15); color: var(--color-black); font-size: var(--font-lg); font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.webui-specs summary::-webkit-details-marker { display: none; }
.webui-specs summary::after { content: "+"; position: absolute; top: 50%; right: var(--width-15); color: var(--color-brand); font: var(--weight-regular) var(--font-8xl)/var(--leading-none) var(--font-latin); transform: translateY(-50%); }
.webui-specs[open] summary::after { content: "−"; }
.webui-table-wrap { overflow-x: auto; border-top: 1px solid var(--color-gray-300); }
.webui-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--font-base); line-height: var(--leading-normal); }
.webui-table th, .webui-table td { padding: var(--width-10); border-top: 1px solid var(--color-gray-300); text-align: left; vertical-align: top; }
.webui-table thead th { color: var(--color-white); background: var(--color-black); font-size: var(--font-base); }
.webui-table tbody th { width: 24%; min-width: 180px; color: var(--color-black); background: var(--color-gray-100); }
.webui-table tbody td:first-of-type { width: 30%; min-width: 220px; font-weight: var(--weight-bold); }
.webui-table tbody td:nth-of-type(2) { width: 46%; min-width: 320px; font-weight: var(--weight-regular); white-space: normal; }
.webui-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 900px) {
  .webui-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webui-guide-media-layout, .webui-guide-media-layout.is-menu { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--width-20); }
  .webui-guide-columns { grid-template-columns: 1fr; gap: var(--width-20); }
}
@media (max-width: 640px) {
  .webui-title-break { display: block; }
  .webui-connection-diagram { margin-top: var(--width-20); }
  .webui-index { grid-template-columns: 1fr; }
  .webui-index a { min-height: var(--width-60); }
  .webui-guide-card { padding: var(--width-20) var(--width-15); }
  .webui-guide-media-layout, .webui-guide-media-layout.is-menu { grid-template-columns: 1fr; }
  .webui-guide-image { width: min(100%, 300px); margin-inline: auto; }
  .webui-function-columns { grid-template-columns: 1fr; }
  .webui-screen-grid.is-five,
  .webui-screen-grid.is-two { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
  .webui-screen-grid.is-single { grid-template-columns: minmax(0, calc((100% - var(--width-20)) / 2)); }
  .webui-specs { margin-top: var(--width-25); }
  .webui-specs summary { padding-left: var(--width-10); }
}
@media (max-width: 400px) {
  .webui-screen-grid.is-single { grid-template-columns: 1fr; }
}
/* main > 問い合わせ */
.contact-page { background: var(--color-gray-100); }
.contact-heading {margin-bottom: var(--width-05); }
.contact-heading h1 { color: var(--color-black); font-size: clamp(2.25rem, 0.769rem + 3.7vw, 3.5rem); line-height: var(--leading-snug); }
.contact-required-note { margin: var(--width-15) 0 0; color: var(--color-black); font-size: var(--font-sm); }
.contact-required-note span { margin-right: var(--width-025); color: var(--color-brand); font-weight: var(--weight-bold); }
.contact-form { overflow: hidden; border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); position: relative; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form-section { min-width: 0; margin: 0; padding: var(--width-30); border: 0; }
.contact-form-section + .contact-form-section { border-top: 1px solid var(--color-gray-100); }
.contact-form-section legend { float: left;  display: flex; align-items: baseline; gap: var(--width-10); width: 100%; margin: 0 0 var(--width-15); padding: 0; color: var(--color-black); font-size: var(--font-2xl); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
.contact-form-section legend + * { clear: both; }
.contact-form-section legend span { display: inline-block; color: var(--color-brand); font: var(--weight-bold) var(--font-2xl)/var(--leading-none) var(--font-latin);}
.contact-field { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--width-20); align-items: center; padding: var(--width-15) 0; border-bottom: 1px solid var(--color-gray-200); }
.contact-field:last-child { border-bottom: 0; }
.contact-field.is-top-aligned { align-items: start; }
.contact-field > label, .contact-field-label { color: var(--color-black); font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
.contact-field-label > small { display: block; margin-top: var(--width-025); color: var(--color-black-700); font-size: var(--font-xs); font-weight: var(--weight-regular); }
.field-required, .field-optional { display: inline-block; margin-left: var(--width-05); padding: var(--width-025) var(--width-05) var(--width-025); border-radius: 2px; font-style: normal; font-size: var(--font-xs); font-weight: var(--weight-bold); line-height: var(--leading-none); vertical-align: 2px; }
.field-required { color: var(--color-white); background: var(--color-brand); }
.field-optional { color: var(--color-black); background: var(--color-gray-100); }
.contact-control input[type="text"], .contact-control input[type="url"], .contact-control input[type="tel"], .contact-control input[type="email"], .contact-control textarea { width: 100%; border: 1px solid var(--color-gray-200); border-radius: 0; color: var(--color-black); background: var(--color-white); font: inherit; font-size: var(--font-base); line-height: var(--leading-normal); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-control input[type="text"], .contact-control input[type="url"], .contact-control input[type="tel"], .contact-control input[type="email"] { min-height: var(--width-35); padding: var(--width-10); }
.contact-control textarea { min-height: 240px; padding: var(--width-10); resize: vertical; }
.contact-control input:focus, .contact-control textarea:focus { border-color: var(--color-brand); box-shadow: var(--shadow-xsmall) }
.contact-control input::placeholder, .contact-control textarea::placeholder { color: var(--color-black); }
.contact-control > small { display: block; margin-top: var(--width-05); color: var(--color-black-700); font-size: var(--font-xs); line-height: var(--leading-normal); }
.contact-choice { position: relative; display: flex; align-items: center; min-height: var(--width-35); padding: var(--width-10); border: 1px solid var(--color-gray-200); background: var(--color-white); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.contact-choice + .contact-choice { margin-top: var(--width-05); }
.contact-choice:hover { border-color: var(--color-brand); }
.contact-choice:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-pink); }
.contact-choice input,
.contact-consent input { flex: 0 0 auto; width: var(--width-15); height: var(--width-15); margin: 0 var(--width-10) 0 0; accent-color: var(--color-brand); }
.contact-choice span { font-size: var(--font-base); font-weight: var(--weight-bold); }
.contact-error { color: var(--color-brand) !important; font-weight: var(--weight-bold); }
.contact-error[hidden] { display: none; }
.contact-consent-section > p { margin: 0 0 var(--width-15); color: var(--color-black); font-size: var(--font-base); }
.contact-privacy { border: 1px solid var(--color-gray-200); background: var(--color-gray-100); }
.contact-privacy summary { position: relative; padding: var(--width-10) var(--width-35) var(--width-10) var(--width-10); color: var(--color-black); font-size: var(--font-base); font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.contact-privacy summary::-webkit-details-marker { display: none; }
.contact-privacy summary::after { content: "+"; position: absolute; top: 50%; right: var(--width-10); color: var(--color-brand); font: var(--weight-bold) var(--font-8xl)/var(--leading-none) var(--font-latin); transform: translateY(-50%); }
.contact-privacy[open] summary::after { content: "−"; }
.contact-privacy > div { padding: var(--width-15); border-top: 1px solid var(--color-gray-200); color: var(--color-black); font-size: var(--font-base); line-height: var(--leading-relaxed); }
.contact-privacy p { margin: 0 0 var(--width-10); }
.contact-privacy a { color: var(--color-brand); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 4px; }
.contact-consent { display: flex; align-items: center; justify-content: center; margin-top: var(--width-15); padding: var(--width-15); border: 1px solid var(--color-gray-200); background: var(--color-white); cursor: pointer; }
.contact-consent span { font-size: var(--font-base); font-weight: var(--weight-bold); }
.contact-submit { margin: var(--width-30) auto 0 auto; padding: var(--width-30) var(--width-35) var(--width-35); border-top: 1px solid var(--color-gray-100); text-align: center; background: var(--color-gray-50); }
.contact-submit > p { margin: 0 0 var(--width-10); color: var(--color-black); font-size: var(--font-sm); }
.contact-submit button, .contact-submit-link { width: min(100%, 520px); min-height: var(--width-50); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--width-15); padding: var(--width-15); border: 0; color: var(--color-white); background: var(--color-brand); font: inherit; font-size: var(--font-base); font-weight: var(--weight-bold); line-height: var(--leading-normal); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.contact-submit button:hover, .contact-submit button:focus-visible, .contact-submit-link:hover, .contact-submit-link:focus-visible { background: var(--color-black); transform: translateY(-2px); }
.contact-submit button b, .contact-submit-link b { font: var(--weight-bold) var(--font-2xl)/var(--leading-none) var(--font-latin); }
.contact-confirm-list { margin: 0; }
.contact-confirm-list > div { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--width-20); padding: var(--width-15) 0; border-bottom: 1px solid var(--color-gray-200); }
.contact-confirm-list dt { font-weight: var(--weight-bold); }
.contact-confirm-list dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.contact-confirm-actions { display: flex; justify-content: center; gap: var(--width-20); padding: var(--width-25) var(--width-35) var(--width-30); border-top: 1px solid var(--color-gray-200); background: var(--color-gray-100); }
.contact-confirm-actions button { flex: 1 1 0; min-width: 0; min-height: var(--width-50); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--width-15); padding: var(--width-15); border: 0; color: var(--color-white); background: var(--color-brand); font: var(--weight-bold) var(--font-base)/var(--leading-normal) var(--font-ja); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.contact-confirm-actions button[type="button"] { background: var(--color-black-700); }
.contact-confirm-actions button:hover, .contact-confirm-actions button:focus-visible { background: var(--color-black); transform: translateY(-2px); }
.contact-confirm-actions button b { font: var(--weight-bold) var(--font-2xl)/var(--leading-none) var(--font-latin); }
.contact-notice { margin-bottom: var(--width-20); padding: var(--width-10) var(--width-15); border-left: 4px solid var(--color-brand); background: var(--color-white); }
.contact-notice.is-error { color: var(--color-brand-dark); }
.contact-complete-panel { padding: var(--width-35); border: 1px solid var(--color-gray-200); background: var(--color-white); box-shadow: var(--shadow-card); }
.contact-complete-panel h2 { margin-bottom: var(--width-15); font-size: clamp(1.5rem, 0.907rem + 1.48vw, 2rem); }
@media (max-width: 900px) {
  .contact-field { grid-template-columns: 220px minmax(0, 1fr); gap: var(--width-15); }
}
@media (max-width: 640px) {
  .contact-heading { margin-bottom: var(--width-25); }
  .contact-form-section { padding: var(--width-20) var(--width-15); }
  .contact-form-section legend { font-size: var(--font-xl); }
  .contact-field { grid-template-columns: 1fr; gap: var(--width-10); padding: var(--width-10) 0; }
  .contact-submit { padding: var(--width-20) var(--width-15) var(--width-25); }
  .contact-submit button, .contact-submit-link { width: 100%; min-width: 0; }
  .contact-consent { align-items: flex-start; justify-content: flex-start; padding: var(--width-15) var(--width-10); }
  .contact-confirm-list > div { grid-template-columns: 1fr; gap: var(--width-05); }
  .contact-confirm-actions { flex-direction: column-reverse; padding: var(--width-20) var(--width-15) var(--width-20); }
  .contact-confirm-actions button { width: 100%; min-width: 0; }
  .contact-complete-panel { padding: var(--width-20) var(--width-15); }
}
/* footer */
.site-footer { color: var(--color-black-c00); background: var(--color-black-200); }
.footer-inner { min-height: var(--width-80); display: flex; align-items: center; justify-content: space-between; }
.footer-brand .brand-logo { width: var(--width-100); height: auto; }
.footer-links { display: flex; gap: var(--width-15); font-size: var(--font-sm); }
.footer-links a:hover { color: var(--color-white); }
.copyright { padding: var(--width-10) var(--width-15); border-top: 1px solid var(--color-black-300); color: var(--color-black-700); text-align: center; font-size: var(--font-xs); }
.page-top { position: fixed; right: max(var(--width-30)/2, env(safe-area-inset-right)); bottom: max(var(--width-15), env(safe-area-inset-bottom)); z-index: 15; }
.page-top a { width: var(--width-40); height: var(--width-40); display: grid; place-items: center; color: var(--color-white); background: var(--color-black-200); box-shadow: var(--shadow-small); font: var(--weight-bold) var(--font-xs)/var(--leading-none) var(--font-latin); border-radius: 100%; transition: background .2s ease; }
.page-top a:hover, .page-top a:focus-visible { background: var(--color-brand); }
@media (max-width: 900px) {
  .footer-brand .brand-logo { width: var(--width-90);}
}
@media (max-width: 640px) {
  .footer-inner { padding: var(--width-20) 0; display: grid; gap: var(--width-15); }
  .footer-links { flex-wrap: wrap; gap: var(--width-05) var(--width-15); }
  .page-top { right: max(var(--width-10), env(safe-area-inset-right));}
  .page-top a { width: var(--width-30); height: var(--width-30); }
}