@charset "UTF-8";
/*
Theme Name: LEGALUS
Author: LEGALUS
Author URI: https://legalus.jp/
Version: 1.0
Description: UI Components Styles
*/

:root {
  /* color */
  --color-theme1: #282828;
  /* background */
  --color-background: #ffffff;
  --color-on-background: var(--color-theme1);
  /* primary */
  --color-primary: var(--color-theme1);
  --color-primary-light: #808080;
  --color-primary-pale: #aaaaaa;
  --color-primary-super-pale: #e8e8e8;
  --color-primary-dark: #121212;
  --color-primary-darker: var(--color-primary-dark);
  --color-on-primary: #ffffff;
  /* form (SVG fill = --color-primary, URL-encoded) */
  --form-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23282828' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  /* secondary */
  --color-secondary: #0a3b96;
  --color-secondary-light: #8aabd9;
  --color-secondary-pale: #cfe1fa;
  --color-secondary-dark: #082a57;
  /* gray scale */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  /* other color */
  --color-white: #ffffff;
  --color-black: #333333;
  --color-gray: var(--color-gray-500);
  /* semantic colors */
  --color-error: #dc2626;
  --color-error-light: #fee2e2;
  --color-error-focus: rgba(220, 38, 38, 0.1);
  --color-error-focus-strong: rgba(220, 38, 38, 0.2);
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  /* feature / rating */
  --color-feature-design: #7fc3a7;
  --color-feature-dx: #c8915d;
  --color-feature-marketing: #7185b8;
  --color-rating-star: #ffd000;
  --color-rating-circle: #00b433;
  --color-rating-triangle: #ffa014;
  --color-rating-none: #ff2323;
  /* overlay & surface */
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-overlay-gray: rgba(161, 161, 161, 0.8);
  --color-cta-ripple: rgba(29, 126, 191, 0.15);
  --color-cta-ripple-inverse: rgba(255, 255, 255, 0.2);
  /* sns brand */
  --color-sns-twitter: #000000;
  --color-sns-facebook: #1778f2;
  --color-sns-hatena: #05a3de;
  --color-sns-line: #06c755;
  --color-sns-copy: #737373;
  /* typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-base: 16px;
  --font-size-base-md: 18px;
  --font-size-base-lg: 20px;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-default: var(--font-size-base);
  --font-family: "Futura", "Jost", "Trebuchet MS", "Murecho", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", system-ui, sans-serif;
  --font-family-en-title: "Futura", "Jost", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-system: system-ui, sans-serif;
  --line-height-tight: 1.5;
  --line-height-snug: 1.375;
  --line-height-base: 1.825;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-tag: 2px;
  --letter-spacing-label: 0.08em;
  --letter-spacing-name: 0.03em;
  --letter-spacing-tel: 0.02em;
  /* spacing */
  --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-compact: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-sm-plus: 1.25rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-lg-plus: 2.5rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-section-md: 5rem;
  --spacing-section-lg: 7rem;
  --spacing-section-page: 4.5rem;
  --spacing-section-cta: 8rem;
  /* size */
  --header-height: 80px;
  --global-menu-font-size: clamp(0.625rem, 0.4vw + 0.5rem, 0.875rem);
  --global-menu-gap: clamp(0.75rem, 1.1vw, 1.5rem);
  --wrapper-width-fluid: 88%;
  --wrapper-max-width-md: 1000px;
  --wrapper-max-width-lg: 1880px;
  --page-header-extra-height: 280px;
  --size-button-arrow: 4rem;
  --size-button-circle: 3rem;
  --bottom-float-show: 28px;
  --sticky-cta-size: 3rem;
  --color-glitch-cyan: #00c8ff;
  --color-glitch-red: #ff6b35;
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-accent: 4px;
  --border-width-section: 10px;
  /* round */
  --round-large: 10px;
  --round-medium: 6px;
  --round-pill: 100px;
  /* opacity */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.6;
  --opacity-faint: 0.25;
  /* shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-drawer: 0 0 10px rgba(0, 0, 0, 0.2);
  --box-shadow-default: var(--shadow-default);
  --focus-outline-offset: 2px;
  /* transition */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --duration-panel: 0.3s ease;
  --duration-layout: 0.4s;
  --transition-underline: 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-faq: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* z-index（数値が小→大のレイヤー階層） */
  --z-index-base: 1;
  --z-index-sticky: 999;
  --z-index-backdrop: 10000000;
  --z-index-panel: 10000001;
  --z-index-nav: 99999;
  --z-index-nav-top: 999999;
  --z-index-skip: 10000000;
  /* WP管理バー */
  --lu-admin-bar-height: 0px;
  /* transition */
  --transition-color: color var(--transition-slow), opacity var(--transition-fast);
  --transition-box: background-color var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
  --transition-ui: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  --transition-field: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  --transition-layout: top var(--duration-layout) ease, left var(--duration-layout) ease, transform var(--duration-layout) ease, width var(--duration-layout) ease, background-color var(--duration-layout) ease;
  --transition-motion: transform var(--transition-base), opacity var(--transition-base);
  --transition-float: right var(--transition-base) ease, bottom var(--transition-base) ease, background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

html:has(body.admin-bar) {
  --lu-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
}