/* Mix DesignLab LP Mini Design System v1.3; generated by build.py. */
:root {
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-heading: var(--font-body);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --page-gutter: 32px;
  --content-max: 1120px;
  --text-body: 1.125rem;
  --text-caption: .875rem;
  --text-support: 1rem;
  --text-button: 1.0625rem;
  --text-h1: clamp(2rem, 1.15rem + 2.5vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.1rem + 1.4vw, 2.5rem);
  --text-h3: 1.375rem;
  --line-body: 1.85;
  --line-caption: 1.7;
  --line-button: 1.5;
  --measure-prose: 40ic;
  --paragraph-gap: 2.8em;
  --control-height: 52px;
  --shadow-card: none;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-text);
  --color-link-visited: #68436B;
  --color-error: #982B25;
  --color-success: #285A42;
  --color-focus: #111111;
  --color-focus-inner: #FFFFFF;
  --color-bg: #F7F4EE;
  --color-surface: #FFFFFF;
  --color-text: #292E29;
  --color-muted: #596159;
  --color-primary: #365848;
  --color-accent: #B86F48;
  --color-soft: #E8EEE6;
  --color-line: #C8CEC3;
  --color-on-primary: #FFFFFF;
  --radius-card: 20px;
  --radius-button: 999px;
  --weight-heading: 700;
  --section-space: 104px;
  --hero-columns: 1.05fr 1fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
/* Shared HTML components. Visual tokens come from themes.json. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); }
.lp { background: var(--color-bg); color: var(--color-text); font-size: var(--text-body); line-height: var(--line-body); line-break: strict; word-break: normal; overflow-wrap: anywhere; }
.lp img { max-width: 100%; height: auto; display: block; }
.lp button, .lp input, .lp select, .lp textarea { font: inherit; }
.lp .container { width: min(calc(100% - var(--page-gutter) * 2), var(--content-max)); margin-inline: auto; }
.lp .section { padding-block: var(--section-space); }
.lp h1, .lp h2, .lp h3 { font-family: var(--font-heading); font-weight: var(--weight-heading); margin: 0; line-height: 1.45; letter-spacing: .015em; }
.lp h1 { font-size: var(--text-h1); line-height: var(--heading-line); text-wrap: balance; letter-spacing: var(--letter-h1,.015em); }
.lp h2 { font-size: var(--text-h2); font-family: var(--font-h2,var(--font-heading)); font-weight: var(--weight-h2,var(--weight-heading)); line-height: var(--line-h2,1.45); letter-spacing: var(--letter-h2,.015em); }
.lp h3 { font-size: var(--text-h3); font-family: var(--font-h3,var(--font-heading)); font-weight: var(--weight-h3,var(--weight-heading)); line-height: var(--line-h3,1.45); letter-spacing: var(--letter-h3,.015em); }
.lp p { margin: 0; }
.lp .prose { max-inline-size: 40em; max-inline-size: var(--measure-prose); }
.lp .prose p + p { margin-block-start: var(--paragraph-gap); }
.lp .muted { color: var(--color-muted); }
.lp .caption { font-size: var(--text-caption); line-height: var(--line-caption); }
.lp .stack > * + * { margin-top: var(--stack-gap,var(--space-5)); }
.lp .grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.lp .grid > *, .lp .hero > * { min-width: 0; }
.lp .card { background: var(--card-fill); border: var(--card-border); border-top: var(--card-border-top); border-radius: var(--radius-card); padding: var(--card-padding,var(--space-6)); padding-inline: var(--card-padding-inline); box-shadow: var(--shadow-card); }
.lp .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--control-height); max-width: 100%; padding: var(--button-padding,12px 24px); border: 2px solid var(--color-primary); border-radius: var(--radius-button); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-button); font-weight: 700; text-align: center; line-height: var(--line-button); text-decoration: none; cursor: pointer; transition: transform .16s; box-shadow: var(--button-shadow); }
.lp .button.secondary { color: var(--color-primary); background: var(--color-surface); }
.lp .button:hover { transform: translateY(-2px); text-decoration: underline; text-underline-offset: .2em; }
.lp .button:active { transform: translateY(0); }
.lp a.text-link { color: var(--color-link); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.lp a.text-link:visited { color: var(--color-link-visited); }
.lp a.text-link:hover, .lp a.text-link:active { color: var(--color-link-hover); text-decoration-thickness: .15em; }
.lp :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-focus-inner); }
.lp [id] { scroll-margin-block-start: 24px; }
.lp .field { display: grid; gap: 8px; }
.lp .field label { font-weight: 700; }
.lp .field input, .lp .field textarea, .lp .field select { width: 100%; min-width: 0; min-height: var(--control-height); padding: 12px 16px; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-muted); border-radius: min(var(--radius-card), 8px); font-size: max(1rem,var(--text-body)); }
.lp .field input::placeholder, .lp .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.lp .field-help, .lp .field-error, .lp .required-label { font-size: var(--text-support); line-height: 1.7; }
.lp .field-help { color: var(--color-muted); }
.lp .required-label { display: inline-block; margin-inline-start: 8px; padding-inline: 6px; border: 1px solid currentColor; }
.lp .field-error { color: var(--color-error); font-weight: 700; border-left: 4px solid currentColor; padding-left: 12px; }
.lp .field [aria-invalid="true"] { border-color: var(--color-error); }
.lp [hidden] { display: none !important; }
.lp .form-success { color: var(--color-success); font-size: var(--text-support); }
.lp .badge { display: inline-block; color: var(--color-text); background: var(--color-soft); padding: 6px 12px; border-radius: var(--radius-card); font-size: var(--text-support); }
.lp .hero { display: grid; grid-template-columns: var(--hero-columns); gap: var(--hero-gap,48px); align-items: var(--hero-align); text-align: var(--hero-text-align); max-width: var(--hero-max); margin-inline: auto; }
.lp .hero-copy { min-width: 0; max-width: var(--copy-max); padding: var(--copy-padding); margin-inline: var(--copy-margin); border-top: var(--copy-border); background: var(--copy-fill); }
.lp .hero-copy:only-child { width: 100%; }
.lp .hero-photo { border-radius: var(--photo-radius); aspect-ratio: var(--photo-aspect); border: var(--photo-border); border-left: var(--photo-border-left); object-fit: var(--photo-fit,cover); object-position: var(--photo-position); min-width: 0; width: 100%; }
.lp .section-head { margin-bottom: 32px; }


/* Replaceable visual tokens. */
[data-theme="warm"] {
  --color-bg: #F7F4EE;
  --color-surface: #FFFFFF;
  --color-text: #292E29;
  --color-muted: #596159;
  --color-primary: #365848;
  --color-accent: #B86F48;
  --color-soft: #E8EEE6;
  --color-line: #C8CEC3;
  --color-on-primary: #FFFFFF;
  --radius-card: 20px;
  --radius-button: 999px;
  --weight-heading: 700;
  --font-heading: var(--font-body);
  --section-space: 104px;
  --hero-columns: 1.05fr 1fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
[data-theme="editorial"] {
  --color-bg: #F3F3EF;
  --color-surface: #FFFFFF;
  --color-text: #202321;
  --color-muted: #5A605B;
  --color-primary: #2F5148;
  --color-accent: #7B5845;
  --color-soft: #E6EBE6;
  --color-line: #C6CAC3;
  --color-on-primary: #FFFFFF;
  --radius-card: 0px;
  --radius-button: 0px;
  --weight-heading: 800;
  --font-heading: var(--font-body);
  --section-space: 128px;
  --hero-columns: 1.15fr 1fr;
  --hero-align: start;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 32px 0 0;
  --copy-border: 2px solid var(--color-text);
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 0;
  --card-border-top: 1px solid var(--color-text);
  --card-fill: transparent;
  --card-padding-inline: 0;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 20px 0 0;
  --copy-margin: 0;
}
[data-theme="refined"] {
  --color-bg: #F6F2EB;
  --color-surface: #FFFDFA;
  --color-text: #302C29;
  --color-muted: #686059;
  --color-primary: #625043;
  --color-accent: #8B693C;
  --color-soft: #EBE3D7;
  --color-line: #CFC4B5;
  --color-on-primary: #FFFFFF;
  --radius-card: 2px;
  --radius-button: 2px;
  --weight-heading: 600;
  --font-heading: var(--font-serif);
  --section-space: 128px;
  --hero-columns: minmax(0, 1fr);
  --hero-align: center;
  --hero-max: 880px;
  --hero-text-align: center;
  --copy-max: 700px;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 16/7;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: auto;
}
[data-theme="playful"] {
  --color-bg: #FFF8EB;
  --color-surface: #FFFFFF;
  --color-text: #303338;
  --color-muted: #60626A;
  --color-primary: #355DA4;
  --color-accent: #C25336;
  --color-soft: #F6E6BD;
  --color-line: #CFC6B4;
  --color-on-primary: #FFFFFF;
  --radius-card: 28px;
  --radius-button: 999px;
  --weight-heading: 800;
  --font-heading: var(--font-body);
  --section-space: 96px;
  --hero-columns: 1.05fr 1fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: 40px 40px 80px 40px;
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
[data-theme="craft"] {
  --color-bg: #F3EDE2;
  --color-surface: #FFFDF8;
  --color-text: #34332A;
  --color-muted: #646252;
  --color-primary: #625F3E;
  --color-accent: #965539;
  --color-soft: #E8DFCC;
  --color-line: #C7BFA8;
  --color-on-primary: #FFFFFF;
  --radius-card: 6px;
  --radius-button: 6px;
  --weight-heading: 600;
  --font-heading: var(--font-serif);
  --section-space: 104px;
  --hero-columns: .95fr 1.05fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 0;
  --card-border-top: 1px solid var(--color-muted);
  --card-fill: transparent;
  --card-padding-inline: 8px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
[data-theme="industrial"] {
  --color-bg: #ECEFF1;
  --color-surface: #FFFFFF;
  --color-text: #1E2B35;
  --color-muted: #4E606C;
  --color-primary: #243F56;
  --color-accent: #A94D24;
  --color-soft: #DDE5EB;
  --color-line: #BCC7CF;
  --color-on-primary: #FFFFFF;
  --radius-card: 0px;
  --radius-button: 0px;
  --weight-heading: 900;
  --font-heading: var(--font-body);
  --section-space: 96px;
  --hero-columns: minmax(0, 1fr);
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: 840px;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 16/6;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: 8px solid var(--color-primary);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.3;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
[data-theme="clean"] {
  --color-bg: #F4F8FA;
  --color-surface: #FFFFFF;
  --color-text: #25343B;
  --color-muted: #526570;
  --color-primary: #236275;
  --color-accent: #356BA0;
  --color-soft: #E1EEF2;
  --color-line: #BFCFD5;
  --color-on-primary: #FFFFFF;
  --radius-card: 12px;
  --radius-button: 12px;
  --weight-heading: 700;
  --font-heading: var(--font-body);
  --section-space: 104px;
  --hero-columns: 1.05fr 1fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 0;
  --copy-border: 0;
  --copy-fill: transparent;
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 0;
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 4px solid var(--color-primary);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: none;
  --heading-line: 1.45;
  --mobile-copy-padding: 0;
  --copy-margin: 0;
}
[data-theme="pop"] {
  --color-bg: #FFF8F5;
  --color-surface: #FFFFFF;
  --color-text: #2F2432;
  --color-muted: #6B566A;
  --color-primary: #AF235B;
  --color-accent: #4B54A0;
  --color-soft: #F7DFE8;
  --color-line: #D7BFCB;
  --color-on-primary: #FFFFFF;
  --radius-card: 8px;
  --radius-button: 8px;
  --weight-heading: 900;
  --font-heading: var(--font-body);
  --section-space: 96px;
  --hero-columns: 1.05fr 1fr;
  --hero-align: center;
  --hero-max: 100%;
  --hero-text-align: left;
  --copy-max: none;
  --copy-padding: 32px;
  --copy-border: 0;
  --copy-fill: var(--color-soft);
  --photo-aspect: 4/5;
  --photo-radius: var(--radius-card);
  --photo-border: 3px solid var(--color-text);
  --photo-border-left: var(--photo-border);
  --photo-position: center;
  --card-border: 1px solid var(--color-line);
  --card-border-top: 1px solid var(--color-line);
  --card-fill: var(--color-surface);
  --card-padding-inline: 32px;
  --button-shadow: 3px 3px 0 var(--color-text);
  --heading-line: 1.45;
  --mobile-copy-padding: 24px;
  --copy-margin: 0;
}
/* Keep mobile overrides after the theme tokens (v1.1 cascade fix). */
@media (max-width: 767px) {
  .lp {   --page-gutter: 20px;
  --text-body: 1.0625rem;
  --text-h3: 1.3125rem;
  --section-space: 64px; --photo-aspect: 4/3; --hero-text-align: left; --hero-columns: 1fr; --hero-gap: 32px; --card-padding: 24px; }
  .lp .hero { grid-template-columns: var(--hero-columns); gap: var(--hero-gap); }
  .lp .grid { grid-template-columns: minmax(0, 1fr); }
  .lp .card { padding: var(--card-padding); }
  .lp .button { width: 100%; }
  .lp .hero-copy { padding: var(--copy-padding-mobile,var(--mobile-copy-padding)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lp .button:hover { transform: none; }
}
@media (forced-colors: active) {
  .lp :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  .lp .button, .lp .field input { border-color: ButtonText; }
}