/* Public design system. This file owns type, shared surfaces, controls and scale.
   Page styles own composition only. See docs/design-system.md. */
:root{
  --font-jp:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-en:'Inter',sans-serif;
  --font-text:'Inter','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --color-ink:#263027;--color-muted:#626d5c;--color-primary:#587834;--color-primary-hover:#456028;
  --color-accent:#98ba5b;--color-surface:#fff;--color-surface-soft:#f4f7ef;--color-border:#dce4d3;
  --ink:var(--color-ink);--muted:var(--color-muted);--brand:var(--color-accent);
  --weight-body:400;--weight-label:600;--weight-heading:700;
  --text-page:clamp(30px,3.2vw,46px);--text-display:clamp(32px,4vw,56px);
  --text-section:clamp(26px,2.5vw,36px);--text-subtitle:24px;--text-lead:clamp(21px,2.1vw,28px);
  --text-body:16px;--text-small:14px;--text-caption:12px;--text-small-title:18px;
  --leading-heading:1.5;--leading-compact:1.35;--leading-body:2;--leading-label:1.6;
  --tracking-heading:.025em;--tracking-body:.02em;--tracking-label:.12em;
  --space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;
  --space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;
  --gutter:40px;--section-space:80px;--hero-space:64px;--card-padding:24px;
  --width-wide:1160px;--width-reading:960px;--width-prose:780px;
  --radius-control:8px;--radius-card:12px;--radius-media:8px;
  --shadow-card:0 8px 24px #26302712;--motion-duration:200ms;--motion-easing:ease;
}
@media(max-width:800px){:root{--gutter:24px;--text-page:32px;--text-section:28px;--text-subtitle:22px}}
@media(max-width:600px){:root{--gutter:20px;--section-space:48px;--hero-space:40px;--card-padding:20px;--text-page:28px;--text-display:28px;--text-section:26px;--text-subtitle:21px;--text-body:15px;--text-lead:21px;--text-small-title:16px}}

/* Every public renderer installs the same font stack; Latin glyphs use Inter,
   Japanese glyphs fall through to Noto Sans JP. Icon fonts remain untouched. */
.site-public{font-family:var(--font-text);font-size:var(--text-body);font-weight:var(--weight-body);color:var(--color-ink);background:var(--color-surface);-webkit-font-smoothing:antialiased}
.site-public :where(h1,h2,h3,h4,p,a,button,input,textarea,select,li,time,small,figcaption,th,td):not(.icon),
.site-public .StudioCanvas .sd:not(.icon){font-family:var(--font-text)!important}
.site-public :is(.type-page-title,.type-hero-title,.type-section-title,.type-subtitle,.type-small-title){height:auto!important;max-width:100%!important;line-height:var(--leading-heading)!important;letter-spacing:var(--tracking-heading)!important;line-break:strict;word-break:normal;overflow-wrap:anywhere;text-wrap:pretty}
.site-public .type-page-title{font-size:var(--text-page)!important;font-weight:var(--weight-heading)!important}
.site-public .type-hero-title{font-size:var(--text-display)!important;font-weight:var(--weight-heading)!important;line-height:var(--leading-compact)!important}
.site-public .type-section-title{font-size:var(--text-section)!important;font-weight:var(--weight-heading)!important}
.site-public .type-subtitle{font-size:var(--text-subtitle)!important;font-weight:var(--weight-label)!important;line-height:var(--leading-label)!important}
.site-public .type-small-title{font-size:var(--text-small-title)!important;font-weight:var(--weight-label)!important;line-height:var(--leading-label)!important;text-align:left!important}
.site-public .type-eyebrow{font-family:var(--font-en)!important;font-size:var(--text-caption)!important;font-weight:var(--weight-label)!important;line-height:var(--leading-label)!important;letter-spacing:var(--tracking-label)!important;color:var(--color-primary)!important;margin-bottom:var(--space-12)!important;height:auto!important}
.site-public :is(.type-body,.type-rich-text){display:block!important;font-size:var(--text-body)!important;font-weight:var(--weight-body)!important;line-height:var(--leading-body)!important;letter-spacing:var(--tracking-body)!important;line-break:strict;word-break:normal;overflow-wrap:anywhere;text-align:left!important;height:auto!important;min-height:0!important}
.site-public .type-body{max-width:var(--width-prose)!important;margin-inline:auto!important}
.site-public .type-rich-text p{font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-align:left!important}
.site-public .prose-block>p{margin:0 0 1.4em!important;font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
.site-public .prose-block>p:last-child{margin-bottom:0!important}
.site-public .type-rich-text p+p{margin-top:1.4em!important}
.site-public .type-rich-text a{color:var(--color-primary);text-underline-offset:4px;text-decoration-thickness:1px}
.site-public .type-rich-text :is(ul,ol){padding-left:1.5em;line-height:var(--leading-body)}
.site-public .type-rich-text li{margin:.45em 0}
.site-public .type-lead{font-size:var(--text-lead)!important;font-weight:var(--weight-label)!important;line-height:var(--leading-label)!important;letter-spacing:var(--tracking-heading)!important;text-wrap:pretty;max-width:var(--width-reading)!important;height:auto!important}
.site-public :is(.type-note,.profile-prose){font-size:var(--text-small)!important;line-height:var(--leading-body)!important;letter-spacing:var(--tracking-body)!important}
.site-public .type-note{font-size:var(--text-caption)!important;color:var(--color-muted)!important}
.site-public .type-display-label{font-size:var(--text-display)!important;font-weight:var(--weight-heading)!important;letter-spacing:var(--tracking-heading)!important}

/* Composition primitives: one gutter and one vertical rhythm at each size. */
.site-public .site-container{width:calc(100% - var(--gutter)*2)!important;max-width:var(--width-wide)!important;margin-inline:auto!important;box-sizing:border-box}
.site-public .site-section{padding-block:var(--section-space)!important;height:auto!important;min-height:0!important;box-sizing:border-box}
.site-public :is(.robot-hero,.minorisu-hero){padding-block:var(--hero-space);background:var(--color-surface-soft)}
.site-public .service-page-name{margin-top:0!important;font-size:var(--text-subtitle)!important;font-weight:var(--weight-heading);line-height:var(--leading-heading);color:var(--color-ink)}
.site-public :is(.robot-hero,.minorisu-hero) h1{line-height:var(--leading-compact)!important;margin-top:var(--space-24)}
.site-public :is(.robot-contact,.minorisu-cta){padding-block:var(--section-space);background:var(--color-surface-soft)}
/* Long legal headings are prose headings rather than marketing section titles. */
.site-public .legal-heading{font-size:var(--text-subtitle)!important;font-weight:var(--weight-label)!important;text-align:left!important;margin-bottom:var(--space-16)!important}

/* Button: primary + secondary only. Layout wrappers determine placement. */
.site-public .site-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:none!important;width:fit-content!important;max-width:100%!important;height:auto!important;min-height:48px!important;box-sizing:border-box!important;padding:var(--space-12) var(--space-20)!important;border:1px solid transparent!important;border-radius:var(--radius-control)!important;background:var(--color-primary)!important;color:#fff!important;font-family:var(--font-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-label)!important;line-height:var(--leading-label)!important;letter-spacing:var(--tracking-body)!important;text-align:center!important;text-decoration:none!important;white-space:normal;cursor:pointer;box-shadow:none!important;transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing)}
.site-public .site-button :is(p,span,div){font:inherit!important;letter-spacing:inherit!important;color:inherit!important;line-height:inherit!important;margin:0!important;max-width:100%!important}
.site-public .site-button .icon{display:none!important}
.site-public .site-button:hover:not(:disabled){background:var(--color-primary-hover)!important;transform:none!important}
.site-public .site-button--secondary{background:var(--color-surface)!important;color:var(--color-primary)!important;border-color:var(--color-border)!important}
.site-public .site-button--secondary:hover:not(:disabled){background:var(--color-surface-soft)!important;border-color:var(--color-primary)!important}
.site-public .site-button:disabled{opacity:.55;cursor:wait}
.site-public .site-text-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-small);font-weight:var(--weight-label);line-height:var(--leading-label);color:var(--color-primary);text-decoration:underline;text-underline-offset:5px}
.site-public :is(a,button,input,textarea,select):focus-visible{outline:3px solid var(--color-primary)!important;outline-offset:4px}

/* Card: one surface; hover movement is reserved for a fully clickable card. */
.site-public .site-card{min-width:0;box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);overflow:hidden;text-decoration:none}
.site-public .site-card--interactive{transition:transform var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing)}
.site-public .site-card--interactive:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--color-primary)}
@media(hover:hover) and (pointer:fine){.site-public .site-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--color-primary)}}
.site-public :is(.robot-product-info,.minorisu-app-info,.home-business-card-copy){padding:var(--card-padding)}
/* Article content is emitted by the CMS, so map its semantic elements to the same scale. */
.site-public .article-header h1{font-size:var(--text-section);font-weight:var(--weight-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.site-public .article-body{font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
.site-public .article-body h2{font-size:var(--text-subtitle);font-weight:var(--weight-heading);line-height:var(--leading-heading)}
.site-public .article-body h3{font-size:var(--text-small-title);font-weight:var(--weight-heading);line-height:var(--leading-label)}
.site-public .tokuiten-news h3{font-size:var(--text-body);font-weight:var(--weight-label);line-height:1.8}
@media(max-width:600px){.site-public :is(.robot-hero,.minorisu-hero) h1{margin-top:var(--space-20)}}
@media(max-width:374px){.site-public :is(.robot-hero,.minorisu-hero) h1{font-size:24px!important}}
@media(prefers-reduced-motion:reduce){.site-public :is(.site-button,.site-card--interactive){transition:none}.site-public .site-card--interactive:is(:hover,:focus-within){transform:none}}
/* Form controls share the same scale; keep text at least 16px to avoid mobile
   browser zoom while editing. The native checkbox keeps its own geometry. */
.site-public #contact-form :is(input:not([type=checkbox]),textarea,select){font-family:var(--font-text)!important;font-size:max(16px,var(--text-body))!important;line-height:var(--leading-label)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-control)!important;background:var(--color-surface)!important;color:var(--color-ink)!important}
.site-public #contact-form :is(input,textarea,select):focus{border-color:var(--color-primary)!important;box-shadow:0 0 0 3px #5878341a!important}
.site-public .farm-juice{padding-inline:0}
/* A newsletter is a linked card, with the same surface and hover behavior. */
.site-public .recruit-newsletter{background:var(--color-surface);border-radius:var(--radius-card)}

/* The four text-only page intros share one heading block. Photo banners retain
   their image composition and use the same type roles. */
.site-public .site-page-heading{display:flex!important;flex-direction:column!important;align-items:center!important;width:calc(100% - var(--gutter)*2)!important;max-width:var(--width-reading)!important;height:auto!important;min-height:0!important;padding:0!important;margin:0 auto var(--space-40)!important;text-align:center!important}
.site-public .site-page-heading h1{margin:0!important;text-align:center!important}
.site-public .site-page-heading .type-eyebrow{margin:0 0 var(--space-12)!important}
/* The news list has no enclosing section above its intro. */
.site-public.page-news .site-page-heading{padding-top:var(--section-space)!important}
@media(max-width:600px){.site-public .site-page-heading{margin-bottom:var(--space-32)!important}}

/* Service heroes and their first product section form one continuous surface.
   Use one shared gap instead of adding both sections' vertical padding. */
.site-public :is(.robot-hero,.minorisu-hero):has(+.site-section){padding-bottom:0}
.site-public :is(.robot-hero,.minorisu-hero)+.site-section{padding-top:var(--space-48)!important}

/* Image preview: scroll the image inside a native modal, keeping close visible. */
.site-public .site-image-viewer{box-sizing:border-box;width:min(960px,calc(100% - var(--space-32)));max-width:none;max-height:calc(100dvh - var(--space-32));margin:auto;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);overflow:auto;overscroll-behavior:contain}
.site-public .site-image-viewer::backdrop{background:#000b}
.site-public .site-image-viewer-toolbar{position:sticky;top:0;display:flex;justify-content:flex-end;padding:var(--space-12) var(--space-16);background:var(--color-surface)}
.site-public .site-image-viewer>img{box-sizing:border-box;display:block;width:100%;height:auto;padding:0 var(--space-16) var(--space-16)}
.site-public:has(.site-image-viewer[open]){overflow:hidden}
.site-public [data-image-preview]{cursor:zoom-in}