img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:0 0 !important;padding:0 !important} :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} :root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--color--background:#fff;--wp--preset--color--foreground:#404040;--wp--preset--color--primary:#b91c1c;--wp--preset--color--secondary:#15803d;--wp--preset--color--tertiary:#0369a1;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,#0693e3 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,#fcb900 0%,#ff6900 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px #fff,6px 6px #000;--wp--preset--shadow--crisp:6px 6px 0px #000}:root{--wp--style--global--content-size:40rem;--wp--style--global--wide-size:60rem}:where(body){margin:0}.wp-site-blocks>.alignleft{float:left;margin-right:2em}.wp-site-blocks>.alignright{float:right;margin-left:2em}.wp-site-blocks>.aligncenter{justify-content:center;margin-left:auto;margin-right:auto}:where(.is-layout-flex){gap:.5em}:where(.is-layout-grid){gap:.5em}.is-layout-flow>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-flow>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-flow>.aligncenter{margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-constrained>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-constrained>.aligncenter{margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>.alignwide{max-width:var(--wp--style--global--wide-size)}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex>:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid>:is(*,div){margin:0}body{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}a:where(:not(.wp-element-button)){text-decoration:underline}:root :where(.wp-element-button,.wp-block-button__link){background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-top:calc(0.667em + 2px);padding-right:calc(1.333em + 2px);padding-bottom:calc(0.667em + 2px);padding-left:calc(1.333em + 2px);text-decoration:none;text-transform:inherit}.has-black-color{color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-color{color:var(--wp--preset--color--white) !important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important}.has-background-color{color:var(--wp--preset--color--background) !important}.has-foreground-color{color:var(--wp--preset--color--foreground) !important}.has-primary-color{color:var(--wp--preset--color--primary) !important}.has-secondary-color{color:var(--wp--preset--color--secondary) !important}.has-tertiary-color{color:var(--wp--preset--color--tertiary) !important}.has-black-background-color{background-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-background-color{background-color:var(--wp--preset--color--white) !important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important}.has-background-background-color{background-color:var(--wp--preset--color--background) !important}.has-foreground-background-color{background-color:var(--wp--preset--color--foreground) !important}.has-primary-background-color{background-color:var(--wp--preset--color--primary) !important}.has-secondary-background-color{background-color:var(--wp--preset--color--secondary) !important}.has-tertiary-background-color{background-color:var(--wp--preset--color--tertiary) !important}.has-black-border-color{border-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-border-color{border-color:var(--wp--preset--color--white) !important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important}.has-background-border-color{border-color:var(--wp--preset--color--background) !important}.has-foreground-border-color{border-color:var(--wp--preset--color--foreground) !important}.has-primary-border-color{border-color:var(--wp--preset--color--primary) !important}.has-secondary-border-color{border-color:var(--wp--preset--color--secondary) !important}.has-tertiary-border-color{border-color:var(--wp--preset--color--tertiary) !important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important} /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */ /*! Theme Name: _tw-hioryes-20250615 Theme URI: https://underscoretw.com/ Author: underscoretw.com Author URI: https://underscoretw.com/ Description: A custom theme based on _tw Version: 0.1.0 Tested up to: 6.2 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: _tw-hioryes Tags: This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. _tw-hioryes is based on _tw https://underscoretw.com/, (C) 2021-2025 Greg Sullivan _tw is distributed under the terms of the GNU GPL v2 or later. _tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2025 Automattic, Inc. Underscores and Varia are distributed under the terms of the GNU GPL v2 or later. */ :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-500: oklch(0.637 0.237 25.331); --color-red-600: oklch(0.577 0.245 27.325); --color-blue-500: oklch(0.623 0.214 259.815); --color-blue-600: oklch(0.546 0.245 262.881); --color-indigo-700: oklch(0.457 0.24 277.023); --color-rose-600: oklch(0.586 0.253 17.585); --color-gray-50: oklch(0.985 0.002 247.839); --color-gray-200: oklch(0.928 0.006 264.531); --color-gray-300: oklch(0.872 0.01 258.338); --color-gray-400: oklch(0.707 0.022 261.325); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-900: oklch(0.21 0.034 264.665); --color-zinc-300: oklch(0.871 0.006 286.286); --color-zinc-400: oklch(0.705 0.015 286.067); --color-zinc-500: oklch(0.552 0.016 285.938); --color-zinc-600: oklch(0.442 0.017 285.786); --color-zinc-700: oklch(0.37 0.013 285.805); --color-zinc-800: oklch(0.274 0.006 286.033); --color-zinc-900: oklch(0.21 0.006 285.885); --color-neutral-600: oklch(0.439 0 0); --color-neutral-700: oklch(0.371 0 0); --color-neutral-900: oklch(0.205 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-xl: 80rem; --container-2xs: 18rem; --container-lg: 32rem; --container-xl: 36rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-sm: 0.25rem; --radius-lg: 0.5rem; --radius-4xl: 2rem; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); --color-primary: var(--wp--preset--color--primary); --container-content: var(--wp--style--global--content-size); --container-wide: var(--wp--style--global--wide-size); --font-lato: "Lato", sans-serif; --font-noto: "Noto Sans JP", sans-serif; --font-jost: "Jost", sans-serif; --font-zen-old: "Zen Old Mincho", serif; } *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } body { line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden='until-found'])) { display: none !important; } body { background-color: var(--color-white); font-family: var(--font-sans); } .c-title { font-family: var(--font-noto); --tw-leading: var(--leading-tight); line-height: var(--leading-tight); --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .c-title__h1 { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } @media (width >= 40rem) { .c-title__h1 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } p { font-family: var(--font-noto); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-zinc-700); } @media (width >= 40rem) { p { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } a:hover { text-decoration-line: underline; } .u-fadein { opacity: 0; } #masthead { position: fixed; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 500; width: 100%; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: color-mix(in oklab, var(--color-white) 40%, transparent); padding-block: calc(var(--spacing) * 2); } @media (width >= 80rem) { #masthead { padding-block: calc(var(--spacing) * 6); } } #masthead { transition: all .4s ease-in-out; } #masthead.bg_blur { backdrop-filter: blur(8px); padding-block: calc(var(--spacing) * 0); } #masthead.bg_blur .mega-nav__logo { width: calc(var(--spacing) * 28); } @media (width >= 40rem) { #masthead.bg_blur .mega-nav__logo { width: calc(var(--spacing) * 32); } } @media (width >= 48rem) { #masthead.bg_blur .mega-nav__logo { width: calc(var(--spacing) * 46); } } .header-sociallist { display: flex; gap: calc(var(--spacing) * 2); } @media (width < 40rem) { .header-sociallist { gap: calc(var(--spacing) * 6); } } .header-sociallist__icons { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--spacing) * 8); padding-inline: calc(var(--spacing) * 4); } @media (width >= 48rem) { .header-sociallist__icons { gap: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .header-sociallist__icons { padding-inline: calc(var(--spacing) * 0); } } @media (width >= 80rem) { .header-sociallist__icons { gap: calc(var(--spacing) * 10); } } @media (width >= 80rem) { .header-sociallist__icons { padding-inline: calc(var(--spacing) * 6); } } .p-home__hero { display: flex; height: 100%; min-height: 100%; flex-direction: column-reverse; overflow: hidden; } @media (width >= 64rem) { .p-home__hero { flex-direction: row; } } .p-home__hero-left-area, .p-home__hero-right-area { position: relative; width: 100%; } @media (width >= 64rem) { .p-home__hero-left-area, .p-home__hero-right-area { width: calc(2/3 * 100%); } } @media (width >= 96rem) { .p-home__hero-left-area, .p-home__hero-right-area { width: calc(1/2 * 100%); } } .p-home__hero-left-area { position: relative; z-index: 50; background-color: var(--color-white); } @media (width >= 40rem) { .p-home__hero-left-area { padding-left: 3%; } } @media (width >= 64rem) { .p-home__hero-left-area { padding-top: 145px; } } @media (width >= 80rem) { .p-home__hero-left-area { padding-top: 120px; } } .p-home__hero-left-area { display: flex; flex-direction: column; justify-content: center; } @media (width < 40rem) { .p-home__hero-subtext { padding-inline: calc(var(--spacing) * 2); } } .p-home__hero-left-area .subtext { position: absolute; top: 65%; left: 10%; z-index: 10; font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-neutral-700); } .p-home__hero-left-area .btn { margin-right: calc(var(--spacing) * 2.5); display: inline-block; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-black); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 2.5); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; } .p-home__hero-left-area .btn.primary { background-color: var(--color-black); color: var(--color-white); } .p-home__hero-left-area .btn.secondary { background-color: transparent; color: var(--color-black); } .p-home__hero-left-area .btn:hover { background-color: var(--color-neutral-700); color: var(--color-white); } .p-home__hero-right-area { position: relative; z-index: 10; } @media (width < 40rem) { .p-home__hero-right-area { height: 39vh; } } .p-home__hero-right-area .video-container { position: relative; height: 100%; width: 100%; } .js-social-icons { display: inline-flex; align-items: center; justify-content: flex-start; gap: calc(var(--spacing) * 10); padding-inline: calc(var(--spacing) * 6); mix-blend-mode: difference; } .masked-video-container { margin-top: calc(var(--spacing) * -10); margin-bottom: calc(var(--spacing) * 6); width: 100%; } @media (width >= 64rem) { .masked-video-container { margin-bottom: calc(var(--spacing) * 12); } } @media (width >= 80rem) { .masked-video-container { margin-top: calc(var(--spacing) * 4); } } @media (width >= 80rem) { .masked-video-container { width: 52vw; } } .masked-video { height: 100%; width: 100%; object-fit: cover; clip-path: url(#text-clip); } .full-video { height: 100%; width: 100%; object-fit: cover; } .video-overlay { position: absolute; top: 98%; left: calc(100% - 100px); z-index: 10; width: 100%; } @media (width < 40rem) { .video-overlay { display: none; } } .movie-container { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } .movie-item { position: relative; display: flex; aspect-ratio: var(--aspect-video); width: 100%; align-items: center; justify-content: center; background-color: var(--color-black); } @media (width >= 40rem) { .movie-item { aspect-ratio: 2.35/1; } } .movie-item::before { content: ""; position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 40; height: 100%; width: 100%; background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } .movie-container video { width: 100%; height: 100%; } svg { position: absolute; height: calc(var(--spacing) * 0); width: calc(var(--spacing) * 0); } @screen md { .p-home__hero { flex-direction: column; } .p-home__hero-left-area, .p-home__hero-right-area { height: 50vh; width: 100%; } } .p-home__client-list { margin-top: calc(var(--spacing) * 8); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--spacing) * 2); } @media (width >= 64rem) { .p-home__client-list { margin-top: calc(var(--spacing) * 12); } } @media (width >= 64rem) { .p-home__client-list { margin-bottom: calc(var(--spacing) * 16); } } .p-home__client-list li { display: inline-block; border-right-style: var(--tw-border-style); border-right-width: 1px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-right-color: var(--color-zinc-500); border-bottom-color: var(--color-zinc-400); padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 0.5); font-family: var(--font-noto); font-size: 10px; color: var(--color-zinc-700); } @media (width >= 64rem) { .p-home__client-list li { padding-inline: calc(var(--spacing) * 3); } } @media (width >= 64rem) { .p-home__client-list li { padding-block: calc(var(--spacing) * 1); } } @media (width >= 64rem) { .p-home__client-list li { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } :is(.p-home__client-list li):last-child { border-style: var(--tw-border-style); border-width: 0px; } @media (width < 40rem) { .p-home__works-item { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } } @media (width < 40rem) { .p-home__works-item { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } @media (width < 40rem) { .p-home__works-item { --tw-gradient-via: var(--color-white); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } } @media (width < 40rem) { .p-home__works-item { --tw-gradient-via-position: 30%; } } @media (width < 40rem) { .p-home__works-item { --tw-gradient-to: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .masked-video-container { position: relative; } .masked-video-container::before { content: ""; position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); display: block; height: 100%; width: 100%; background-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/./img/index/hero-copy-mask-color.png); background-size: 100%; background-repeat: no-repeat; background-position: left top; z-index: 30; } .masked-video-container::after { content: ""; display: block; position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); display: block; height: 100%; width: 100%; background-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/./img/index/hero-copy-mask-shadow.png); background-size: 100%; background-repeat: no-repeat; background-position: left top; z-index: -1; filter: drop-shadow(11px 10px 32px rgba(0, 0, 0, 0.05)) drop-shadow(42px 41px 59px rgba(0, 0, 0, 0.04)) drop-shadow(95px 92px 80px rgba(0, 0, 0, 0.02)) drop-shadow(170px 164px 94px rgba(0, 0, 0, 0.01)) drop-shadow(265px 256px 103px rgba(0, 0, 0, 0.00)); } .movie__video { aspect-ratio: 2/0.98; width: 100%; mask-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/img/index/hero-copy-mask.svg); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 100%; height: 100%; width: 100%; object-fit: cover; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); } .movie__video-overlay { position: absolute; right: 10%; bottom: 10%; z-index: 10; background-color: color-mix(in oklab, var(--color-black) 50%, transparent); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-white); } @media (width < 40rem) { .movie__video-overlay { display: none; } } .movie-container.is-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 5; } .p-home__concept-title--200 { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; } .p-home__concept-title--kansen { padding-top: calc(var(--spacing) * 2); } @media (width < 40rem) { .p-home__concept-title--kansen { max-width: calc(var(--spacing) * 48); } } .p-home__concept-title--200-text { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); font-family: var(--font-lato); font-size: 80px; --tw-leading: 1em; line-height: 1em; --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); color: var(--color-black); } @media (width >= 64rem) { .p-home__concept-title--200-text { font-size: 160px; } } .p-home__concept-title--200-percent { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); padding-bottom: calc(var(--spacing) * 2); font-family: var(--font-lato); font-size: 50px; --tw-leading: 1em; line-height: 1em; --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); color: var(--color-black); } @media (width >= 64rem) { .p-home__concept-title--200-percent { font-size: 90px; } } .p-home__concept-reason { position: relative; } @media (width >= 64rem) { .p-home__concept-reason--left { position: sticky; } } @media (width >= 64rem) { .p-home__concept-reason--left { top: calc(var(--spacing) * 0); } } @media (width >= 64rem) { .p-home__concept-reason--left { height: 100vh; } } @media (width >= 64rem) { .p-home__concept-reason--left { min-height: 100vh; } } .p-home__concept-reason-item-img img, .p-home__concept-reason-item-img video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; } .p-home__concept-reason-item-img img.active, .p-home__concept-reason-item-img video.active { opacity: 1; } @media (max-width: 768px) { .p-home__concept-reason-item-img { position: relative; width: 100%; height: 50vh; } } .p-home__concept-reason--left-area { background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 29.8%); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .p-home__concept-reason--left-area.is-visible { opacity: 1; transform: translateY(0); } .p-home__concept-reason--left-area.is-hidden { opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease, transform 0.8s ease; } .p-home__concept-reason--right { opacity: 0; transform: translateY(-5vw); transition: opacity 1.6s ease-in-out, transform 0.8s ease-in-out; } .p-home__concept-reason--right.is-visible { opacity: 1; transform: translateY(0); } .bgdrop { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0 !important; margin-bottom: 0 !important; } .p-single__content { margin-block: calc(var(--spacing) * 16); } .p-single__content h2.wp-block-heading { margin-top: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 4); font-family: var(--font-noto); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } @media (width >= 64rem) { .p-single__content h2.wp-block-heading { margin-top: calc(var(--spacing) * 16); } } @media (width >= 64rem) { .p-single__content h2.wp-block-heading { margin-bottom: calc(var(--spacing) * 8); } } @media (width >= 64rem) { .p-single__content h2.wp-block-heading { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .p-single__content h3.wp-block-heading { margin-block: calc(var(--spacing) * 4); font-family: var(--font-noto); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } @media (width >= 64rem) { .p-single__content h3.wp-block-heading { margin-block: calc(var(--spacing) * 8); } } @media (width >= 64rem) { .p-single__content h3.wp-block-heading { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .p-single__content .wp-block-heading:first-child { margin-top: calc(var(--spacing) * 0); } .p-single__content .wp-block-columns { margin-block: calc(var(--spacing) * 16); display: flex; flex-direction: column; gap: calc(var(--spacing) * 12); } @media (width >= 48rem) { .p-single__content .wp-block-columns { flex-direction: row; } } @media (width >= 48rem) { .p-single__content .wp-block-columns { align-items: center; } } .p-single__content .wp-block-image { margin-block: calc(var(--spacing) * 8); } @media (width >= 64rem) { .p-single__content .wp-block-image { margin-block: calc(var(--spacing) * 16); } } .size-large:is(.p-single__content .wp-block-image) img { margin-inline: auto; display: block; --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .p-single__content .wp-block-snow-monkey-blocks-balloon { margin-block: calc(var(--spacing) * 6); } .p-service__others { margin-top: calc(var(--spacing) * 16); display: flex; flex-direction: column; flex-wrap: wrap; gap: calc(var(--spacing) * 12); } @media (width >= 64rem) { .p-service__others { flex-direction: row; } } .p-service__others__item { display: flex; width: 100%; flex-direction: column; } @media (width >= 64rem) { .p-service__others__item { width: 45%; } } .p-aboutus__mission-title.c-title { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } @media (width >= 64rem) { .p-aboutus__mission-title.c-title { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } } .p-aboutus__mission-title.c-title .p-aboutus__mission-title-en { display: block; font-family: var(--font-lato); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: 3px; letter-spacing: 3px; text-transform: uppercase; } .p-aboutus__mission-title.c-title .p-aboutus__mission-title-ja { font-family: var(--font-noto); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); --tw-tracking: 2px; letter-spacing: 2px; --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .p-aboutus__mission p { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .p-aboutus__mission-subtitle { margin-bottom: calc(var(--spacing) * 8); font-family: var(--font-noto); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-leading: var(--leading-tight); line-height: var(--leading-tight); --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } @media (width >= 48rem) { .p-aboutus__mission-subtitle { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } @media (width >= 64rem) { .p-aboutus__mission-subtitle { margin-bottom: calc(var(--spacing) * 12); } } .p-aboutus__mission-subtitle.is-left { text-align: left; } .p-aboutus__outline .p-aboutus__outline__table { width: 100%; border-collapse: collapse; } .p-aboutus__outline .p-aboutus__outline__table__row { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-200); } .p-aboutus__outline .p-aboutus__outline__table__head { width: calc(1/5 * 100%); background-color: var(--color-gray-50); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 3); text-align: left; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__table__head { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__table__head { padding-block: calc(var(--spacing) * 4); } } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__table__head { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (width >= 64rem) { .p-aboutus__outline .p-aboutus__outline__table__head { width: calc(1/4 * 100%); } } .p-aboutus__outline .p-aboutus__outline__table__data { padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__table__data { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__table__data { padding-block: calc(var(--spacing) * 4); } } :where(:is(.p-aboutus__outline .p-aboutus__outline__list) > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } @media (width >= 48rem) { :where(:is(.p-aboutus__outline .p-aboutus__outline__list) > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .p-aboutus__outline .p-aboutus__outline__list__title { margin-bottom: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-gray-700); } @media (width >= 64rem) { .p-aboutus__outline .p-aboutus__outline__list__title { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .is-small:is(.p-aboutus__outline .p-aboutus__outline__list__title) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } @media (width >= 48rem) { .is-small:is(.p-aboutus__outline .p-aboutus__outline__list__title) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .p-aboutus__outline .p-aboutus__outline__list__data { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-gray-600); } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__list__data { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .p-aboutus__outline .p-aboutus__outline__map { margin-top: calc(var(--spacing) * 3); height: calc(var(--spacing) * 48); width: 100%; border-radius: var(--radius-lg); } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__map { margin-top: calc(var(--spacing) * 4); } } @media (width >= 48rem) { .p-aboutus__outline .p-aboutus__outline__map { height: calc(var(--spacing) * 64); } } .p-home__concept-title-live img { transform: translateX(-100px); transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; } @media (width < 40rem) { .p-home__concept-title-live img { margin-left: calc(var(--spacing) * 0); } } @media (width < 40rem) { .p-home__concept-title-live img { max-height: 95px; } } @media (width < 40rem) { .p-home__concept-title-live img { width: auto; } } .p-home__concept-title-direct img { transform: translateX(100px); transition: opacity 1.3s 0.6s ease-in-out, transform 1.3s 0.8s ease-in-out; } @media (width < 40rem) { .p-home__concept-title-direct img { max-height: 95px; } } @media (width < 40rem) { .p-home__concept-title-direct img { width: auto; } } .p-home__concept-title--text img { transition: opacity 1.8s 2.4s ease-in-out, transform 1.25s 2.4s ease-in-out; display: block; } .p-home__concept-title--and img { display: block; } @media (width < 40rem) { .p-home__concept-title--and img { margin-top: calc(var(--spacing) * -6); } } @media (width < 40rem) { .p-home__concept-title--and img { margin-bottom: calc(var(--spacing) * -10); } } @media (width < 40rem) { .p-home__concept-title--and img { margin-left: calc(var(--spacing) * 32); } } @media (width < 40rem) { .p-home__concept-title--and img { max-height: 90px; } } @media (width < 40rem) { .p-home__concept-title--and img { width: auto; } } .p-home__concept-title--200 img { display: block; transform: translateY(50px); transition: opacity 1.8s ease-in-out, transform 1.8s ease-in-out; transition-delay: 1.2s; } .p-home__concept-title-live.is-visible img, .p-home__concept-title-direct.is-visible img, .p-home__concept-title--text.is-visible img, .p-home__concept-title--200.is-visible img { opacity: 1; transform: translate(0); } .p-home__concept-title-live img, .p-home__concept-title-direct img, .p-home__concept-title--text img, .p-home__concept-title--200 img { opacity: 0; } .p-home__concept-title-live.is-visible, .p-home__concept-title--200.is-visible, .p-home__concept-title-direct.is-visible, .p-home__concept-title--text.is-visible { opacity: 1; visibility: visible; transform: translate(0); } .features-horizontal-scroll { position: relative; width: 100%; height: auto; } .features-scroll-container { display: flex; flex-direction: column; gap: calc(var(--spacing) * 16); } .features-scroll-item { width: 100%; flex-shrink: 0; } .features-scroll-item--empty { display: flex; height: calc(var(--spacing) * 64); align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; --tw-border-style: dashed; border-style: dashed; border-color: var(--color-gray-300); } .features-scroll-item--empty::before { content: "今後追加予定のコンテンツ"; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-gray-400); } @media (min-width: 1024px) { .features-horizontal-scroll { position: sticky; top: calc(var(--spacing) * 0); overflow: hidden; height: 100vh; z-index: 10; } .features-scroll-container { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: calc(var(--spacing) * 8); height: 100%; padding: 2rem; width: max-content; } .features-scroll-item { width: 90vw; max-width: 1200px; height: calc(100% - 4rem); overflow-y: auto; } .features-scroll-container::after { content: ""; display: block; width: 100px; height: 1px; } .features-scroll-progress { position: fixed; bottom: calc(var(--spacing) * 4); left: calc(1/2 * 100%); z-index: 20; height: calc(var(--spacing) * 1); width: calc(var(--spacing) * 40); --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--color-gray-200); } .features-scroll-progress-bar { height: 100%; width: calc(var(--spacing) * 0); background-color: var(--color-black); transition: width 0.2s ease; } } .horizontal-section { position: relative; overflow: hidden; } .horizontal-container { display: flex; align-items: flex-start; height: 100%; display: flex; flex-direction: row; gap: calc(var(--spacing) * 40); } .horizontal-container .item { flex: 0 0 auto; width: 100%; box-sizing: border-box; margin-inline: auto; max-width: 90vw; scroll-snap-type: x var(--tw-scroll-snap-strictness); --tw-scroll-snap-strictness: mandatory; padding-top: calc(var(--spacing) * 10); } @media (width >= 64rem) { .horizontal-container .item { max-width: 1080px; } } .access-images { margin-top: calc(var(--spacing) * 24); display: flex; flex-direction: column; gap: calc(var(--spacing) * 16); } .footer-container { border-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px); border-top-style: var(--tw-border-style); border-top-width: 2px; border-color: var(--color-zinc-300); padding-top: calc(var(--spacing) * 6); padding-bottom: calc(var(--spacing) * 14); } @media (width >= 40rem) { .footer-container { padding-bottom: calc(var(--spacing) * 0); } } .footer-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--spacing) * 12); } .footer__nav { display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: calc(var(--spacing) * 0); row-gap: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 8); } @media (width >= 40rem) { .footer__nav { row-gap: calc(var(--spacing) * 8); } } @media (width >= 40rem) { .footer__nav { padding-inline: calc(var(--spacing) * 0); } } @media (width >= 40rem) { .footer__nav { padding-top: calc(var(--spacing) * 0); } } @media (width >= 40rem) { .footer__nav { padding-bottom: calc(var(--spacing) * 0); } } .footer__nav li { width: calc(1/2 * 100%); } @media (width >= 40rem) { .footer__nav li { width: calc(1/3 * 100%); } } .footer__nav .c-title.c-title__h3 { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacing) * 1); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } :is(.footer__nav .c-title.c-title__h3) .c-title__en { margin-bottom: calc(var(--spacing) * 0); display: block; padding-bottom: calc(var(--spacing) * 0); } :is(.footer__nav .c-title.c-title__h3) .c-title__ja { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } #video-player-container video { opacity: 0; transition: opacity 0.8s ease-in-out; height: 100%; object-fit: cover; } #video-player-container.loaded video { opacity: 1; } .c-section { margin-inline: auto; width: 100%; max-width: var(--container-7xl); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 14); } @media (width >= 40rem) { .c-section { padding-inline: calc(var(--spacing) * 6); } } @media (width >= 40rem) { .c-section { padding-block: calc(var(--spacing) * 20); } } .c-section__wider { max-width: 1680px; padding-inline: 2%; } .c-section__widest { max-width: 1920px; padding-inline: 2%; } .c-subsection { margin-inline: auto; width: 100%; padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 14); } @media (width >= 40rem) { .c-subsection { padding-block: calc(var(--spacing) * 18); } } @media (width >= 64rem) { .c-subsection { padding-inline: calc(var(--spacing) * 6); } } .c-subsection__container { margin-inline: auto; width: 100%; max-width: 1280px; } .c-subsection__container.is-wider { max-width: 1440px; } p:not(:last-child) { margin-bottom: 1.2rem; } .btn-primary, .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); font-family: var(--font-noto); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } @media (width >= 64rem) { .btn-primary, .wpcf7-submit { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } @media (width >= 80rem) { .btn-primary, .wpcf7-submit { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .btn-primary, .wpcf7-submit { padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 4.5); } @media (width >= 80rem) { .btn-primary, .wpcf7-submit { padding-inline: calc(var(--spacing) * 8); } } @media (width >= 80rem) { .btn-primary, .wpcf7-submit { padding-top: calc(var(--spacing) * 4); } } @media (width >= 80rem) { .btn-primary, .wpcf7-submit { padding-bottom: calc(var(--spacing) * 5); } } .btn-primary, .wpcf7-submit { position: relative; z-index: 10; cursor: pointer; overflow: hidden; border-radius: calc(infinity * 1px); background-color: var(--color-red-600); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-white); text-decoration-line: none; } @media (hover: hover) { :is(.btn-primary,.wpcf7-submit):hover { text-decoration-line: none; } } .btn-primary, .wpcf7-submit { --tw-shadow: 15px 60px 17px 0px var(--tw-shadow-color, rgba(0,0,0,0)), 10px 38px 16px 0px var(--tw-shadow-color, rgba(0,0,0,0.01)), 5px 22px 13px 0px var(--tw-shadow-color, rgba(0,0,0,0.05)), 2px 10px 10px 0px var(--tw-shadow-color, rgba(0,0,0,0.09)), 1px 2px 5px 0px var(--tw-shadow-color, rgba(0,0,0,0.10)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: cubic-bezier(0.175,0.885,0.32,1.275); transition-timing-function: cubic-bezier(0.175,0.885,0.32,1.275); } @media (hover: hover) { :is(.btn-primary,.wpcf7-submit):hover { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (hover: hover) { :is(.btn-primary,.wpcf7-submit):hover { --tw-scale-x: 102%; --tw-scale-y: 102%; --tw-scale-z: 102%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { :is(.btn-primary,.wpcf7-submit):hover { background-color: var(--color-red-500); } } @media (hover: hover) { :is(.btn-primary,.wpcf7-submit):hover { --tw-shadow: 0 6px 12px var(--tw-shadow-color, rgba(0,0,0,0.15)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } :is(.btn-primary,.wpcf7-submit):active { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } :is(.btn-primary,.wpcf7-submit):active { scale: .98; } :is(.btn-primary,.wpcf7-submit):active { --tw-shadow: 0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } :is(.btn-primary,.wpcf7-submit)::before { content: ""; width: 0.6em; height: 0.6em; background: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/img/common/play-button-arrowhead.svg) no-repeat center 55%; background-size: contain; } .btn-primary::after, .wpcf7-submit::after { content: ""; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; background-color: rgba(255, 255, 255, 0.25); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0.7; transition: transform 0.6s cubic-bezier(0.1, 0.7, 0.6, 1), opacity 0.7s ease-out; z-index: 1; pointer-events: none; } .btn-primary:hover::after, .wpcf7-submit:hover::after { transform: translate(-50%, -50%) scale(1); opacity: 0; } .wpcf7-submit { margin-top: calc(var(--spacing) * 8); width: 100%; } .btn-primary__badge { padding: 0.2rem 0.7rem; background-color: white; color: #DC492C; font-size: 0.75rem; font-weight: 700; border-radius: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 0.625rem; } .c-button { overflow: hidden; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 400ms; transition-duration: 400ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (hover: hover) { .c-button:hover { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (hover: hover) { .c-button:hover { --tw-scale-x: 102%; --tw-scale-y: 102%; --tw-scale-z: 102%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { .c-button:hover { background-color: #F45D3F; } } @media (hover: hover) { .c-button:hover { --tw-shadow: 0 6px 12px var(--tw-shadow-color, rgba(0,0,0,0.15)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .c-button__secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-black); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 8); padding-top: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 4.5); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-black); position: relative; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .c-button__secondary:hover { transform: translateY(-2px); text-decoration-line: none; } .c-button__secondary::after { content: ""; display: block; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/img/common/icon-arrow.svg); background-size: contain; background-repeat: no-repeat; } .c-button__secondary::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; background-color: rgba(255, 255, 255, 0.25); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0.7; transition: transform 0.6s cubic-bezier(0.1, 0.7, 0.6, 1), opacity 0.7s ease-out; z-index: 1; pointer-events: none; } .c-button__secondary:hover::before { transform: translate(-50%, -50%) scale(1); opacity: 0; } .c-button__frame { position: relative; margin-inline: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-white); padding-inline: calc(var(--spacing) * 8); padding-top: calc(var(--spacing) * 2); padding-bottom: calc(var(--spacing) * 2.5); padding-left: calc(var(--spacing) * 10); text-align: center; font-family: var(--font-lato); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); --tw-tracking: .15em; letter-spacing: .15em; color: var(--color-white); text-transform: uppercase; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (width >= 40rem) { .c-button__frame { padding-top: calc(var(--spacing) * 4); } } @media (width >= 40rem) { .c-button__frame { padding-bottom: calc(var(--spacing) * 4.5); } } @media (width >= 48rem) { .c-button__frame { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 48rem) { .c-button__frame { padding-top: calc(var(--spacing) * 4); } } @media (width >= 48rem) { .c-button__frame { padding-bottom: calc(var(--spacing) * 4.5); } } @media (width >= 48rem) { .c-button__frame { padding-left: calc(var(--spacing) * 18); } } @media (width >= 48rem) { .c-button__frame { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .c-button__frame:hover { border-color: transparent; background-color: transparent; text-decoration-line: none; opacity: 50%; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .c-button__black { position: relative; margin-inline: auto; display: inline-flex; width: 100%; max-width: calc(var(--spacing) * 96); align-items: center; justify-content: center; border-radius: 50px; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-red-600); --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: var(--color-zinc-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); --tw-gradient-to: var(--color-zinc-800); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 5); padding-right: calc(var(--spacing) * 6); padding-bottom: calc(var(--spacing) * 5.5); padding-left: calc(var(--spacing) * 3); --tw-leading: 1; line-height: 1; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-white); } @media (width >= 40rem) { .c-button__black { padding-top: calc(var(--spacing) * 5); } } @media (width >= 40rem) { .c-button__black { padding-bottom: calc(var(--spacing) * 5.5); } } @media (width >= 64rem) { .c-button__black { padding-inline: calc(var(--spacing) * 12); } } .c-button__black { box-shadow: 15px 60px 17px 0px rgba(0, 0, 0, 0.00), 10px 38px 16px 0px rgba(0, 0, 0, 0.01), 5px 22px 13px 0px rgba(0, 0, 0, 0.05), 2px 10px 10px 0px rgba(0, 0, 0, 0.09), 1px 2px 5px 0px rgba(0, 0, 0, 0.10); } .c-button__black:hover { border-color: transparent; background-color: var(--color-zinc-900); color: var(--color-white); text-decoration-line: none; } .c-button__black::after { content: ""; display: block; position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/img/common/icon-arrow-white.svg); background-size: contain; background-repeat: no-repeat; right: calc(var(--spacing) * 5); overflow: hidden; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .c-button__black:hover::after { transform: translateY(-50%) translateX(25px); opacity: 0; } .c-button__black::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; background-color: rgba(255, 255, 255, 0.25); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0.7; transition: transform 0.6s cubic-bezier(0.1, 0.7, 0.6, 1), opacity 0.7s ease-out; z-index: 1; pointer-events: none; } .c-button__black:hover::before { transform: translate(-50%, -50%) scale(1); opacity: 0; } .c-text-link, .current { color: var(--color-blue-500); text-decoration-line: underline; } .c-permalink::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .c-social-icon { position: relative; height: calc(var(--spacing) * 4); width: calc(var(--spacing) * 4); overflow: hidden; } @media (width >= 80rem) { .c-social-icon { height: calc(var(--spacing) * 5); } } @media (width >= 80rem) { .c-social-icon { width: calc(var(--spacing) * 5); } } .c-social-icon img { height: 100%; width: 100%; object-fit: contain; } .c-title__ja { display: block; justify-content: flex-start; font-family: var(--font-noto); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-zinc-900); } @media (width >= 40rem) { .c-title__ja { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } .c-title__h2 { font-family: var(--font-noto); font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-black); } @media (width >= 40rem) { .c-title__h2 { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } .c-title__h2 .c-title__en { justify-content: flex-start; padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 2); font-family: var(--font-lato); font-size: .325em; --tw-leading: 1.1; line-height: 1.1; --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); --tw-tracking: 0.4em; letter-spacing: 0.4em; color: var(--color-zinc-700); text-transform: uppercase; } .c-title__h3 { font-family: var(--font-noto); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-black); } @media (width >= 40rem) { .c-title__h3 { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } .c-title__h3 .c-title__en { margin-bottom: calc(var(--spacing) * 2); display: block; justify-content: flex-start; border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-zinc-500); padding-top: calc(var(--spacing) * 0.5); padding-bottom: calc(var(--spacing) * 0.5); padding-left: calc(var(--spacing) * 4); font-family: var(--font-lato); font-size: .325em; --tw-tracking: 0.7em; letter-spacing: 0.7em; color: var(--color-zinc-600); text-transform: uppercase; } .c-title__nowrap { font-size: clamp(1.5rem, 6vw, 3rem); } .marker-line { position: relative; display: inline-block; --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .marker-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2em; width: 100%; height: 30%; background-color: #FAF285; z-index: -1; } .d-movement { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .d-movement { gap: calc(var(--spacing) * 2); } } .d-movement__source { display: grid; gap: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .d-movement__source { gap: calc(var(--spacing) * 2); } } .d-movement__item { height: 50px; display: flex; align-items: center; justify-content: flex-end; border-radius: 0.25em; } .d-movement__item--one { background-color: var(--color-indigo-700); color: var(--color-white); } .d-movement__item--two { color: var(--color-white); background-color: var(--color-gray-900); } .d-movement__item--three { color: var(--color-white); background-color: var(--color-rose-600); } .d-movement__sub-element { background-color: var(--color-gray-300); border-radius: 0.25em; transition: background 0.2s; } .d-movement__arrow { width: 0; height: 0; border: 12px solid transparent; border-left-color: currentColor; } .tabs__control { text-decoration: none; color: var(--color-gray-500); } .tabs__control:focus { outline: 2px solid hsla(245 58% 51% / 0.2); outline-offset: 2px; } .tabs__control:hover { color: var(--color-gray-700); } .tabs__control[aria-selected=true] { color: var(--color-gray-700); text-decoration: underline; } :root { --anim-menu-btn-size: 48px; --anim-menu-btn-transition-duration: .2s; --anim-menu-btn-icon-size: 32px; --anim-menu-btn-icon-stroke: 2px; } .anim-menu-btn { display: flex; justify-content: center; align-items: center; width: var(--anim-menu-btn-size); height: var(--anim-menu-btn-size); } .anim-menu-btn__icon { position: relative; display: block; font-size: var(--anim-menu-btn-icon-size); width: 1em; height: var(--anim-menu-btn-icon-stroke); color: inherit; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; transform: scale(1); } .anim-menu-btn__icon::before, .anim-menu-btn__icon::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: inherit; border-radius: inherit; } .anim-menu-btn__icon--close { background-size: 100% 100%; will-change: transform, background-size; transition-property: transform, background-size; } .anim-menu-btn:active .anim-menu-btn__icon--close { transform: scale(0.9); } .anim-menu-btn__icon--close::before, .anim-menu-btn__icon--close::after { will-change: inherit; transition: inherit; } .anim-menu-btn__icon--close::before { transform: translateY(-0.25em) rotate(0); } .anim-menu-btn__icon--close::after { transform: translateY(0.25em) rotate(0); } .anim-menu-btn--state-b .anim-menu-btn__icon--close { background-size: 0% 100%; } .anim-menu-btn--state-b .anim-menu-btn__icon--close::before { transform: translateY(0) rotate(45deg); } .anim-menu-btn--state-b .anim-menu-btn__icon--close::after { transform: translateY(0) rotate(-45deg); } .anim-menu-btn__icon--arrow-left, .anim-menu-btn__icon--arrow-right, .anim-menu-btn__icon--arrow-up, .anim-menu-btn__icon--arrow-down { border-radius: 50em; will-change: transform; transition-property: transform; transition-duration: var(--anim-menu-btn-transition-duration, 0.2s); } .anim-menu-btn:active .anim-menu-btn__icon--arrow-left, .anim-menu-btn:active .anim-menu-btn__icon--arrow-right, .anim-menu-btn:active .anim-menu-btn__icon--arrow-up, .anim-menu-btn:active .anim-menu-btn__icon--arrow-down { transform: scale(0.9); } .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn__icon--arrow-down::before, .anim-menu-btn__icon--arrow-down::after { transform-origin: calc(var(--anim-menu-btn-icon-stroke)/2) 50%; will-change: transform, width; transition-property: transform, width; transition-duration: var(--anim-menu-btn-transition-duration, 0.2s); } .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn__icon--arrow-down::before { transform: translateY(-0.25em) rotate(0); } .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn__icon--arrow-down::after { transform: translateY(0.25em) rotate(0); } .anim-menu-btn__icon--arrow-right { transform: rotate(180deg); } .anim-menu-btn:active .anim-menu-btn__icon--arrow-right { transform: rotate(180deg) scale(0.9); } .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after { width: 50%; } .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before { transform: translateY(0) rotate(-45deg); } .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after { transform: translateY(0) rotate(45deg); } .anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up { transform: rotate(90deg) scale(0.9); } .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up { transform: rotate(90deg); } .anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down { transform: rotate(-90deg) scale(0.9); } .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down { transform: rotate(-90deg); } :root { --search-input-btn-width: 2.2em; --search-input-icon-size: 1em; --search-input-shortcut-margin: 0.325em; } .search-input { position: relative; } .search-input__input { width: 100%; height: 100%; } .search-input__input::-webkit-search-decoration, .search-input__input::-webkit-search-cancel-button, .search-input__input::-webkit-search-results-button, .search-input__input::-webkit-search-results-decoration { -webkit-appearance: none; } .search-input__input::-ms-clear, .search-input__input::-ms-reveal { display: none; width: 0; height: 0; } .search-input--icon-right .search-input__input { padding-right: var(--search-input-btn-width); } .search-input--icon-left .search-input__input { padding-left: var(--search-input-btn-width); } .search-input__btn { background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; line-height: inherit; appearance: none; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: var(--search-input-btn-width); } .search-input__btn:active .icon { transform: translateY(2px); } .search-input__btn .icon { display: block; --size: var(--search-input-icon-size); margin-left: auto; margin-right: auto; color: var(--color-gray-400); transition: 0.2s; } .search-input--icon-left .search-input__btn { left: 0; right: auto; pointer-events: none; } .search-input__btn:focus .icon, .search-input .search-input__input:focus+.search-input__btn .icon { color: var(--color-indigo-700); } .search-input__shortcut { position: absolute; right: var(--search-input-shortcut-margin); top: var(--search-input-shortcut-margin); height: calc(100% - var(--search-input-shortcut-margin)*2); display: flex; align-items: center; background-color: var(--color-white); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); border-radius: var(--radius-sm); padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 0); } @media (width >= 64rem) { .search-input__shortcut { padding-inline: calc(var(--spacing) * 1.5); } } .search-input__shortcut { line-height: 1; color: var(--color-gray-500); } .search-input:focus-within .search-input__shortcut { display: none; } .feature-v4 { --feature-text-offset: 65%; position: relative; z-index: 1; } @media (min-width: 32rem) { .feature-v4__text-offset\@xs { width: calc(100% + var(--feature-text-offset)); } .feature-v4--invert\@xs .feature-v4__grid>*:last-child { order: -1; } .feature-v4--invert\@xs .feature-v4__text-offset\@xs { margin-left: calc(var(--feature-text-offset) * -1); } } @media (min-width: 48rem) { .feature-v4__text-offset\@sm { width: calc(100% + var(--feature-text-offset)); } .feature-v4--invert\@sm .feature-v4__grid>*:last-child { order: -1; } .feature-v4--invert\@sm .feature-v4__text-offset\@sm { margin-left: calc(var(--feature-text-offset) * -1); } } @media (min-width: 64rem) { .feature-v4__text-offset\@md { width: calc(100% + var(--feature-text-offset)); } .feature-v4--invert\@md .feature-v4__grid>*:last-child { order: -1; } .feature-v4--invert\@md .feature-v4__text-offset\@md { margin-left: calc(var(--feature-text-offset) * -1); } } @media (min-width: 80rem) { .feature-v4__text-offset\@lg { width: calc(100% + var(--feature-text-offset)); } .feature-v4--invert\@lg .feature-v4__grid>*:last-child { order: -1; } .feature-v4--invert\@lg .feature-v4__text-offset\@lg { margin-left: calc(var(--feature-text-offset) * -1); } } @media (min-width: 90rem) { .feature-v4__text-offset\@xl { width: calc(100% + var(--feature-text-offset)); } .feature-v4--invert\@xl .feature-v4__grid>*:last-child { order: -1; } .feature-v4--invert\@xl .feature-v4__text-offset\@xl { margin-left: calc(var(--feature-text-offset) * -1); } } :root { --list-space-y: 0.375em; --list-offset: 1em; --list-line-height-multiplier: 1; } .list { padding-left: 0; list-style: none; } .list ul, .list ol { list-style: none; margin: 0; margin-top: calc((var(--list-space-y) / 2) * 1.2); padding-top: calc((var(--list-space-y) / 2) * 1.2); padding-left: var(--list-offset); } .list li { padding-bottom: calc((var(--list-space-y) / 2) * 1.2); margin-bottom: calc((var(--list-space-y) / 2) * 1.2); line-height: calc(1.4 * var(--list-line-height-multiplier)); } .list>li:last-child, .list ul>li:last-child, .list ol>li:last-child { margin-bottom: 0; } .list:not(.list--border)>li:last-child, .list ul>li:last-child, .list ol>li:last-child { padding-bottom: 0; } .list--ul, .list--ol { --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); } .list--ul ul, .list--ul ol, .list--ol ul, .list--ol ol { padding-left: 0; } @supports (--css: variables) { .list--ul li, .list--ol li { padding-left: var(--list-offset) !important; } } .list--ul li::before, .list--ol li::before { display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; position: relative; top: -0.1em; } @supports (--css: variables) { .list--ul li::before, .list--ol li::before { width: var(--list-bullet-size) !important; height: var(--list-bullet-size) !important; margin-left: calc(var(--list-bullet-size) * -1) !important; left: calc(var(--list-bullet-margin-right) * -1) !important; } } .list--ul { --list-bullet-size: 7px; --list-bullet-margin-right: 12px; } .list--ul>li { padding-left: 19px; } .list--ul>li::before { content: ""; border-radius: 50%; color: var(--color-gray-300); background-color: currentColor; width: 7px; height: 7px; margin-left: -7px; left: -12px; } .list--ul ul li::before { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; } .list--ol { --list-bullet-size: 26px; --list-bullet-margin-right: 6px; --list-bullet-font-size: 14px; counter-reset: list-items; } .list--ol>li { counter-increment: list-items; padding-left: 32px; } .list--ol ol { counter-reset: list-items; } .list--ol>li::before { content: counter(list-items); font-size: var(--list-bullet-font-size, 14px); background-color: var(--color-gray-300); color: var(--color-gray-700); line-height: 1; border-radius: 50%; width: 26px; height: 26px; margin-left: -26px; left: -6px; } .list--ol ol>li::before { background-color: transparent; box-shadow: inset 0 0 0 2px #d1d5db; } .list--border li:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); } .list--border ul, .list--border ol { border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-gray-300); } .list--icons { --list-bullet-size: 24px; --list-bullet-margin-right: 8px; --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); } .list--icons ul, .list--icons ol { padding-left: 32px; } @supports (--css: variables) { .list--icons ul, .list--icons ol { padding-left: var(--list-offset); } } .list__icon { position: relative; width: 24px; height: 24px; margin-right: 8px; } .list__icon:not(.top-0) { top: calc((1.4em - 24px) / 2); } @supports (--css: variables) { .list__icon { width: var(--list-bullet-size); height: var(--list-bullet-size); margin-right: var(--list-bullet-margin-right); } .list__icon:not(.top-0) { top: calc((1.4em * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2); } } :root { --masonry-grid-gap: 0.75rem; --masonry-col-auto-size: 280px; } @media (min-width: 64rem) { :root { --masonry-grid-gap: 1.125rem; } } .masonry__list { display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--masonry-grid-gap)); margin-bottom: calc(-1 * var(--masonry-grid-gap)); } .masonry__item { display: inline-block; width: var(--masonry-col-auto-size); margin-right: var(--masonry-grid-gap); margin-bottom: var(--masonry-grid-gap); } .masonry { position: relative; } .masonry__loader { display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 0; } .masonry__list { opacity: 0; transition: opacity 0.4s; } .masonry--loaded .masonry__loader { display: none; } .masonry--loaded .masonry__list { opacity: 1; } @supports (flex-basis: 0px) { .masonry__list { flex-direction: column; } .masonry__item { flex-basis: 0px; } } .icon--is-spinning { animation: icon-spin 1s infinite linear; } @keyframes icon-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card-v9 { display: block; position: relative; z-index: 1; text-decoration: none; color: inherit; background-color: var(--color-gray-300); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition: 0.3s; } .card-v9:hover { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .card-v9__content { display: flex; height: 100%; flex-direction: column; position: relative; z-index: 2; } .card-v9__btn { position: relative; display: inline-block; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); } @media (width >= 64rem) { .card-v9__btn { padding-inline: calc(var(--spacing) * 5); } } @media (width >= 64rem) { .card-v9__btn { padding-block: calc(var(--spacing) * 3); } } .card-v9__btn { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .card-v9__btn i { position: relative; z-index: 2; color: var(--color-white); opacity: 0; transition: opacity 0.3s; } .card-v9__btn::after { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.25rem; background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent); opacity: 0; -webkit-transform: translateY(25%); transform: translateY(25%); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .card-v9:hover .card-v9__btn i { opacity: 1; } .card-v9:hover .card-v9__btn::after { opacity: 1; transform: translateY(0); } .card-v9--overlay-bg::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: color-mix(in oklab, var(--color-white) 50%, transparent); transition: background-color 0.3s; } .card-v9--overlay-bg:hover::before { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } .scribble-text-fx { text-decoration: none; position: relative; z-index: 1; } .scribble-text-fx__label { position: relative; z-index: 2; } .scribble-text-fx__decoration { position: absolute; z-index: 1; display: block; pointer-events: none; max-width: none; } .scribble-text-fx--v1 .scribble-text-fx__decoration { top: -6px; left: -12px; width: calc(100% + 24px); height: calc(100% + 12px); } .scribble-text-fx--v1 .scribble-text-fx__decoration>* { stroke-width: 2px; stroke-dashoffset: 367; stroke-dasharray: 367; transition: stroke-dashoffset 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } .scribble-text-fx--v1:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v2 .scribble-text-fx__decoration { bottom: -5px; left: -10px; width: calc(100% + 20px); height: 8px; } .scribble-text-fx--v2 .scribble-text-fx__decoration>* { stroke-width: 2px; stroke-dashoffset: 155; stroke-dasharray: 155; transition: stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .scribble-text-fx--v2:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v3 .scribble-text-fx__decoration { top: 50%; transform: translateY(-50%); left: -15px; width: calc(100% + 30px); height: 8px; } .scribble-text-fx--v3 .scribble-text-fx__decoration>* { stroke-width: 2px; transition: stroke-dashoffset 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .scribble-text-fx--v3 .scribble-text-fx__decoration>*:first-child { stroke-dashoffset: 149; stroke-dasharray: 149; } .scribble-text-fx--v3 .scribble-text-fx__decoration>*:last-child { stroke-dashoffset: 147; stroke-dasharray: 147; transition-delay: 0.2s; } .scribble-text-fx--v3:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v4 .scribble-text-fx__decoration { top: 50%; transform: translateY(-50%); right: -46px; width: 40px; height: auto; } .scribble-text-fx--v4 .scribble-text-fx__decoration>* { stroke-width: 2px; transition: stroke-dashoffset 0.2s; } .scribble-text-fx--v4 .scribble-text-fx__decoration>*:first-child { stroke-dashoffset: 33; stroke-dasharray: 33; transition-delay: 0.2s; } .scribble-text-fx--v4 .scribble-text-fx__decoration>*:last-child { stroke-dashoffset: 28; stroke-dasharray: 28; transition-delay: 0s; } .scribble-text-fx--v4:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v4:hover .scribble-text-fx__decoration>*:first-child { transition-delay: 0s; } .scribble-text-fx--v4:hover .scribble-text-fx__decoration>*:last-child { transition-delay: 0.2s; } .scribble-text-fx--v5 .scribble-text-fx__decoration { top: 0; right: 0; width: 22px; height: auto; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .scribble-text-fx--v5 .scribble-text-fx__decoration>* { stroke-width: 2px; stroke-dashoffset: 16; stroke-dasharray: 16; transition: stroke-dashoffset 0.3s; } .scribble-text-fx--v5:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v6 .scribble-text-fx__decoration { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 65px; height: auto; } .scribble-text-fx--v6 .scribble-text-fx__decoration>* { stroke-width: 2px; transition: stroke-dashoffset 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .scribble-text-fx--v6 .scribble-text-fx__decoration>*:first-child { stroke-dashoffset: 79; stroke-dasharray: 79; transition-delay: 0.2s; } .scribble-text-fx--v6 .scribble-text-fx__decoration>*:last-child { stroke-dashoffset: 73; stroke-dasharray: 73; transition-delay: 0s; } .scribble-text-fx--v6:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v6:hover .scribble-text-fx__decoration>*:first-child { transition-delay: 0s; } .scribble-text-fx--v6:hover .scribble-text-fx__decoration>*:last-child { transition-delay: 0.2s; } .scribble-text-fx--v7 .scribble-text-fx__decoration { bottom: -5px; left: -10px; width: calc(100% + 20px); height: 10px; } .scribble-text-fx--v7 .scribble-text-fx__decoration>* { stroke-width: 2px; stroke-dashoffset: 160; stroke-dasharray: 160; transition: stroke-dashoffset 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .scribble-text-fx--v7:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v8 .scribble-text-fx__decoration { top: 50%; transform: translateY(-50%); right: -34px; width: 29px; height: auto; } .scribble-text-fx--v8 .scribble-text-fx__decoration>* { stroke-width: 2px; transition: stroke-dashoffset 0.2s; } .scribble-text-fx--v8 .scribble-text-fx__decoration>*:first-child { stroke-dashoffset: 79; stroke-dasharray: 79; transition-delay: 0.2s; } .scribble-text-fx--v8 .scribble-text-fx__decoration>*:last-child { stroke-dashoffset: 18; stroke-dasharray: 18; transition-delay: 0s; } .scribble-text-fx--v8:hover .scribble-text-fx__decoration>* { stroke-dashoffset: 0; } .scribble-text-fx--v8:hover .scribble-text-fx__decoration>*:first-child { transition-delay: 0s; } .scribble-text-fx--v8:hover .scribble-text-fx__decoration>*:last-child { transition-delay: 0.2s; } :root { --dropdown-item-padding: 0.375rem 0.75rem; } @media (min-width: 64rem) { :root { --dropdown-item-padding: 0.4rem 1.125rem; } } .dropdown { position: relative; } .dropdown__menu { width: 200px; border-radius: 0.25rem; padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 1); } @media (width >= 64rem) { .dropdown__menu { padding-block: calc(var(--spacing) * 1.5); } } .dropdown__menu { background-color: var(--color-white); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: 5; position: absolute; left: 0; top: 100%; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; } @media (pointer: fine) { .dropdown__wrapper:hover>.dropdown__menu, .dropdown__sub-wrapper:hover>.dropdown__menu { opacity: 1; visibility: visible; transition: opacity 0.2s; } .dropdown__sub-wrapper:hover>.dropdown__menu { left: 100%; } } @media not all and (pointer: fine) { .dropdown__trigger-icon { display: none; } } .dropdown__item { display: block; text-decoration: none; color: var(--color-gray-700); padding: var(--dropdown-item-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.2s; } .dropdown__item:hover, .dropdown__item.dropdown__item--hover { background-color: color-mix(in oklab, var(--color-gray-900) 7.000000000000001%, transparent); } .dropdown__separator { height: 1px; background-color: var(--color-gray-300); border-style: var(--tw-border-style); border-width: 0px; margin: var(--dropdown-item-padding); } .dropdown__sub-wrapper { position: relative; } .dropdown__sub-wrapper>.dropdown__item { position: relative; padding-right: calc(0.75rem + 12px); } @media (min-width: 64rem) { .dropdown__sub-wrapper>.dropdown__item { padding-right: calc(1.125rem + 12px); } } .dropdown__sub-wrapper>.dropdown__item .icon { position: absolute; display: block; width: 12px; height: 12px; right: calc(var(--spacing) * 1.5); right: calc(var(--spacing) * 2); top: calc(50% - 6px); } .dropdown__sub-wrapper>.dropdown__menu { top: -0.375rem; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @media (min-width: 64rem) { .dropdown__sub-wrapper>.dropdown__menu { top: -0.5625rem; } } .dropdown__menu { top: calc(100% + 4px); } .dropdown__sub-wrapper .dropdown__menu { top: -0.375rem; } @media (min-width: 64rem) { .dropdown__sub-wrapper .dropdown__menu { top: -0.5625rem; } } @media (pointer: fine) { .dropdown__menu--is-visible { opacity: 1; visibility: visible; transition: opacity 0.2s; } } .dropdown__menu--is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; } .dropdown__sub-wrapper>.dropdown__menu--is-visible, .dropdown__sub-wrapper>.dropdown__menu--is-hidden { left: 100%; } .dropdown__sub-wrapper>.dropdown__menu--is-visible.dropdown__menu--left, .dropdown__sub-wrapper>.dropdown__menu--is-hidden.dropdown__menu--left { left: -100%; } :root { --f-header-height: 50px; --f-header-logo-width: 104px; } @media (min-width: 64rem) { :root { --f-header-height: 70px; } } .f-header { height: var(--f-header-height); width: 100%; z-index: 3; } .f-header::before { display: none; content: "mobile"; } .f-header__mobile-content { position: relative; display: flex; height: 100%; justify-content: space-between; align-items: center; z-index: 2; } .f-header__logo { display: block; width: var(--f-header-logo-width); flex-shrink: 0; text-decoration: none; } .f-header__logo svg, .f-header__logo img { display: block; } .f-header__nav-control { --anim-menu-btn-size: 40px; --anim-menu-btn-icon-size: 28px; --anim-menu-btn-icon-stroke: 2px; } .f-header__nav { position: absolute; top: 0; left: 0; width: 100%; max-height: calc(100vh - var(--f-header-offset, 0px)); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-inline: calc(var(--spacing) * 0); padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 5); } @media (width >= 64rem) { .f-header__nav { padding-bottom: calc(var(--spacing) * 8); } } .f-header__nav { background-color: var(--color-white); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: 1; visibility: hidden; opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } .f-header__nav::before { content: ""; display: block; position: -webkit-sticky; position: sticky; top: 0; height: var(--f-header-height); background-color: inherit; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); } .f-header__nav--is-visible { visibility: visible; opacity: 1; transform: translateY(0); transition: visibility 0s, opacity 0.3s, -webkit-transform 0.3s; transition: visibility 0s, opacity 0.3s, transform 0.3s; transition: visibility 0s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .f-header__nav-logo-wrapper { display: none; } .f-header__item { flex-shrink: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); } .f-header__dropdown-icon { --size: 16px; flex-shrink: 0; margin: 0 10px 0 auto; display: none; } .f-header__dropdown-control .f-header__dropdown-icon { display: block; } .f-header__link, .f-header__dropdown-control, .f-header__dropdown-link, .f-header__btn, .f-header__form-control { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } @media (width >= 64rem) { .f-header__link, .f-header__dropdown-control, .f-header__dropdown-link, .f-header__btn, .f-header__form-control { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .f-header__link, .f-header__dropdown-control, .f-header__dropdown-link { display: flex; align-items: center; color: var(--color-gray-700); text-decoration: none; padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 2); } @media (width >= 64rem) { .f-header__link, .f-header__dropdown-control, .f-header__dropdown-link { padding-block: calc(var(--spacing) * 3); } } .f-header__link:hover, .f-header__link[aria-current=page], .f-header__dropdown-control:hover, .f-header__dropdown-control[aria-current=page], .f-header__dropdown-link:hover, .f-header__dropdown-link[aria-current=page] { color: var(--color-indigo-700); } .f-header__btn, .f-header__form-control { width: 100%; margin-inline: calc(var(--spacing) * 0); margin-block: calc(var(--spacing) * 2); } @media (width >= 64rem) { .f-header__btn, .f-header__form-control { margin-block: calc(var(--spacing) * 3); } } .f-header__dropdown-control { width: 100%; } .f-header__dropdown { padding-left: calc(var(--spacing) * 5); } @media (width >= 64rem) { .f-header__dropdown { padding-left: calc(var(--spacing) * 8); } } .f-header__dropdown-control+.f-header__dropdown { display: none; } .f-header__dropdown-control[aria-expanded=true]+.f-header__dropdown { display: block; } @media (min-width: 64rem) { .f-header::before { content: "desktop"; } .f-header__mobile-content { display: none; } .f-header__nav { position: static; padding: 0; background-color: transparent; box-shadow: none; visibility: visible; opacity: 1; transform: translateY(0); transition: none; max-height: none; overflow: visible; overscroll-behavior: auto; height: var(--f-header-height); } .f-header__nav::before { display: none; } .f-header__nav-logo-wrapper { display: flex; } .f-header__nav-grid, .f-header__list { display: flex; align-items: center; } .f-header__nav-grid { height: 100%; } .f-header__item { position: relative; border-bottom: none; margin-right: calc(var(--spacing) * 2); } @media (width >= 64rem) { .f-header__item { margin-right: calc(var(--spacing) * 3); } } .f-header__item:last-child { margin-right: 0; } .f-header__dropdown-icon { --size: 12px; display: block; margin-top: calc(var(--spacing) * 0); margin-right: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 0.5); } @media (width >= 64rem) { .f-header__dropdown-icon { margin-left: calc(var(--spacing) * 1); } } .f-header__link, .f-header__dropdown-control, .f-header__dropdown-link, .f-header__btn, .f-header__form-control { font-size: 1.125rem; } .f-header__link { padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 1); } @media (width >= 64rem) { .f-header__link { padding-inline: calc(var(--spacing) * 2); } } @media (width >= 64rem) { .f-header__link { padding-block: calc(var(--spacing) * 1.5); } } .f-header__link--icon span { display: none; } .f-header__btn, .f-header__form-control { margin: 0; } .f-header__dropdown { position: absolute; top: 100%; width: 220px; left: calc(50% - 110px); padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 1); } @media (width >= 64rem) { .f-header__dropdown { padding-block: calc(var(--spacing) * 1.5); } } .f-header__dropdown { background-color: var(--color-white); border-radius: 0.25rem; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); z-index: 5; pointer-events: none; visibility: hidden; opacity: 0; transition: visibility 0.2s 0.2s, opacity 0.2s 0s; } .f-header__dropdown-control+.f-header__dropdown { display: block; } .f-header__item:hover .f-header__dropdown, .f-header__dropdown-control[aria-expanded=true]+.f-header__dropdown { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0.2s 0s, opacity 0.2s 0s; } .f-header__dropdown-link { color: var(--color-gray-700); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); } @media (width >= 64rem) { .f-header__dropdown-link { padding-inline: calc(var(--spacing) * 5); } } .f-header__dropdown-link { transition: 0.2s; } .f-header__dropdown-link:hover { background-color: color-mix(in oklab, var(--color-gray-900) 7.000000000000001%, transparent); color: var(--color-gray-900); } } .t-article-v4__divider { display: flex; align-items: center; } .t-article-v4__divider span { display: block; margin: 0 0.5rem; height: 10px; width: 10px; transform: rotate(45deg); background-color: var(--color-gray-300); } @media (min-width: 64rem) { .t-article-v4__divider span { margin: 0 0.75rem; } } .t-article-v4__divider::before, .t-article-v4__divider::after { content: ""; display: block; height: 1px; width: auto; flex-grow: 1; background-color: var(--color-gray-300); } .articles-v4.masonry { --masonry-grid-gap: 0.75rem; --masonry-col-auto-size: 320px; } @media (min-width: 64rem) { .articles-v4.masonry { --masonry-grid-gap: 1.125rem; } } :root { --mega-nav-height: 50px; --mega-nav-content-max-width: 1440px; } @media (min-width: 64rem) { :root { --mega-nav-height: 80px; } } .mega-nav { height: var(--mega-nav-height); width: 100%; z-index: 3; } .mega-nav--expanded { background-color: var(--color-white); } .mega-nav__container { height: 100%; padding: 0 3%; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 64rem) { .mega-nav__container { justify-content: space-between; } } .mega-nav__logo { display: block; width: calc(var(--spacing) * 32); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 700ms; transition-duration: 700ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } @media (width >= 40rem) { .mega-nav__logo { width: calc(var(--spacing) * 40); } } @media (width >= 80rem) { .mega-nav__logo { width: calc(var(--spacing) * 56); } } .mega-nav__logo>* { width: inherit; height: inherit; } .mega-nav__icon-btns { display: flex; align-items: center; } .mega-nav__icon-btn { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 24px; color: var(--color-gray-700); cursor: pointer; transition: 0.2s; } .mega-nav__icon-btn .icon { display: block; } .mega-nav__icon-btn .icon__group { stroke-width: 2px; } .mega-nav__icon-btn .icon__group>* { transition: stroke-dashoffset 0.3s, opacity 0.3s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s, opacity 0.3s; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s, opacity 0.3s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .mega-nav__icon-btn--menu .icon__group>* { stroke-dasharray: 24; } .mega-nav__icon-btn--menu .icon__group>*:nth-child(1) { -webkit-transform-origin: 12px 6px; transform-origin: 12px 6px; } .mega-nav__icon-btn--menu .icon__group>*:nth-child(2) { stroke-dashoffset: 0; } .mega-nav__icon-btn--menu .icon__group>*:nth-child(3) { -webkit-transform-origin: 12px 18px; transform-origin: 12px 18px; } .mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b .icon__group>*:nth-child(1) { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); } .mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b .icon__group>*:nth-child(2) { stroke-dashoffset: 24; } .mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b .icon__group>*:nth-child(3) { -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); } .mega-nav__icon-btn--search .icon__group { -webkit-transform-origin: 12px 12px; transform-origin: 12px 12px; transform: rotate(0deg); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav__icon-btn--search .icon__group>*:nth-child(1) { stroke-dashoffset: 34; stroke-dasharray: 24; } .mega-nav__icon-btn--search .icon__group>*:nth-child(2) { stroke-dashoffset: 24; stroke-dasharray: 24; } .mega-nav__icon-btn--search .icon__group>*:nth-child(3) { -webkit-transform-origin: 9.5px 9.5px; transform-origin: 9.5px 9.5px; transform: rotate(45deg); stroke-dashoffset: 84; stroke-dasharray: 42; opacity: 1; } .mega-nav__icon-btn--search.mega-nav__icon-btn--state-b .icon__group { transform: rotate(-90deg); } .mega-nav__icon-btn--search.mega-nav__icon-btn--state-b .icon__group>*:nth-child(1) { stroke-dashoffset: 48; } .mega-nav__icon-btn--search.mega-nav__icon-btn--state-b .icon__group>*:nth-child(2) { stroke-dashoffset: 48; } .mega-nav__icon-btn--search.mega-nav__icon-btn--state-b .icon__group>*:nth-child(3) { stroke-dashoffset: 42; opacity: 0; } .mega-nav__arrow-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: currentColor; transition: color 0.2s; } .mega-nav__arrow-icon .icon { display: block; } .mega-nav__arrow-icon .icon__group { stroke-width: 1px; will-change: transform; -webkit-transform-origin: 8px 8px; transform-origin: 8px 8px; transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav__arrow-icon .icon__group>* { stroke-dasharray: 17; -webkit-transform-origin: 8px 8px; transform-origin: 8px 8px; transform: translateY(3px); transform: translateY(3px); transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, stroke-dashoffset 0.3s; transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav__arrow-icon .icon__group>*:first-child { stroke-dashoffset: 8.5; } .mega-nav__arrow-icon .icon__group>*:last-child { stroke-dashoffset: 8.5; } .mega-nav__label { color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .mega-nav__card img { transition: opacity 0.3s; } .mega-nav__card img:hover { opacity: 0.85; } .mega-nav__card-title { color: var(--color-gray-900); text-decoration: none; } .mega-nav__card-title:hover { text-decoration: underline; } .mega-nav--mobile .mega-nav__icon-btns--desktop { display: none; } .mega-nav--mobile .mega-nav__nav, .mega-nav--mobile .mega-nav__search { display: none; position: absolute; top: var(--mega-nav-height); left: 0; width: 100%; height: calc(100vh - var(--mega-nav-height) - var(--mega-nav-offset-y, 0px)); overflow: auto; -webkit-overflow-scrolling: touch; background-color: var(--color-white); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .mega-nav--mobile .mega-nav__nav--is-visible, .mega-nav--mobile .mega-nav__search--is-visible { display: block; } .mega-nav--mobile .mega-nav__nav--is-visible>*, .mega-nav--mobile .mega-nav__search--is-visible>* { -webkit-animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav--mobile .mega-nav__nav-inner, .mega-nav--mobile .mega-nav__search-inner { padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 5); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__nav-inner, .mega-nav--mobile .mega-nav__search-inner { padding-block: calc(var(--spacing) * 8); } } .mega-nav--mobile .mega-nav__nav-inner, .mega-nav--mobile .mega-nav__search-inner { width: calc(100% - 2.5rem); max-width: var(--mega-nav-content-max-width); margin-left: auto; margin-right: auto; } @media (min-width: 64rem) { .mega-nav--mobile .mega-nav__nav-inner, .mega-nav--mobile .mega-nav__search-inner { width: calc(100% - 4rem); } } .mega-nav--mobile .mega-nav__label { margin-inline: calc(var(--spacing) * 0); margin-top: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 2); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__label { margin-top: calc(var(--spacing) * 12); } } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__label { margin-bottom: calc(var(--spacing) * 3); } } .mega-nav--mobile .mega-nav__item { font-family: var(--font-noto); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .mega-nav--mobile .mega-nav__control { display: flex; align-items: center; width: 100%; font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__control { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .mega-nav--mobile .mega-nav__control { text-align: left; padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 3); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__control { padding-block: calc(var(--spacing) * 5); } } .mega-nav--mobile .mega-nav__control { color: var(--color-gray-900); text-decoration: none; cursor: pointer; } .mega-nav--mobile a[aria-current=page] { color: var(--color-indigo-700); } .mega-nav--mobile .mega-nav__arrow-icon { margin-left: auto; margin-right: 12px; } .mega-nav--mobile .mega-nav__btn { width: 100%; margin-inline: calc(var(--spacing) * 0); margin-block: calc(var(--spacing) * 3); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__btn { margin-block: calc(var(--spacing) * 5); } } .mega-nav--mobile .mega-nav__btn { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__btn { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .mega-nav--mobile .mega-nav__sub-nav-wrapper { padding-inline: calc(var(--spacing) * 5); padding-top: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 8); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-nav-wrapper { padding-inline: calc(var(--spacing) * 8); } } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-nav-wrapper { padding-bottom: calc(var(--spacing) * 12); } } .mega-nav--mobile .mega-nav__sub-nav-wrapper { overflow: hidden; } .mega-nav--mobile .mega-nav__sub-items { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); } .mega-nav--mobile .mega-nav__sub-items:not(:last-child) { margin-bottom: calc(var(--spacing) * 8); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-items:not(:last-child) { margin-bottom: calc(var(--spacing) * 12); } } .mega-nav--mobile .mega-nav__sub-link { display: block; color: var(--color-gray-900); text-decoration: none; padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-link { padding-block: calc(var(--spacing) * 2); } } .mega-nav--mobile .mega-nav__quick-link { display: block; color: var(--color-gray-900); text-decoration: none; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 2); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__quick-link { padding-block: calc(var(--spacing) * 3); } } .mega-nav--mobile .mega-nav__sub-nav--layout-1 .mega-nav__sub-items { margin-bottom: 0; } .mega-nav--mobile .mega-nav__sub-nav--layout-1 .mega-nav__tabs { display: none; } .mega-nav--mobile .mega-nav__sub-nav--layout-3 { padding-top: calc(var(--spacing) * 5); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-nav--layout-3 { padding-top: calc(var(--spacing) * 8); } } .mega-nav--mobile .mega-nav__sub-nav--layout-3 { display: grid; gap: calc(var(--spacing) * 5); } @media (width >= 64rem) { .mega-nav--mobile .mega-nav__sub-nav--layout-3 { gap: calc(var(--spacing) * 8); } } .mega-nav--mobile .mega-nav__sub-nav--layout-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .mega-nav--mobile .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group>*:first-child { -webkit-transform: translateY(-3px) rotate(-90deg); transform: translateY(-3px) rotate(-90deg); } .mega-nav--mobile .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group>*:last-child { -webkit-transform: translateY(-3px) rotate(90deg); transform: translateY(-3px) rotate(90deg); } .mega-nav--mobile .mega-nav__item--expanded .mega-nav__sub-nav-wrapper { display: block; } .mega-nav--mobile .mega-nav__item--expanded .mega-nav__sub-nav-wrapper>* { -webkit-animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav--desktop .mega-nav__icon-btns--mobile, .mega-nav--desktop .mega-nav__sub-nav-wrapper, .mega-nav--desktop .mega-nav__search, .mega-nav--desktop .mega-nav__label { display: none; } .mega-nav--desktop .mega-nav__logo { flex-shrink: 0; margin-right: calc(var(--spacing) * 3); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__logo { margin-right: calc(var(--spacing) * 5); } } .mega-nav--desktop .mega-nav__nav { height: 100%; } .mega-nav--desktop .mega-nav__nav-inner { height: 100%; display: flex; gap: calc(var(--spacing) * 4); } .mega-nav--desktop .mega-nav__items { display: flex; height: 100%; } .mega-nav--desktop .mega-nav__item { display: flex; align-items: center; } .mega-nav--desktop .mega-nav__control { position: relative; display: flex; align-items: center; gap: calc(var(--spacing) * 1); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 0); } @media (width >= 80rem) { .mega-nav--desktop .mega-nav__control { padding-inline: calc(var(--spacing) * 5); } } .mega-nav--desktop .mega-nav__control { height: 100%; font-family: var(--font-noto); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__control { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } @media (width >= 80rem) { .mega-nav--desktop .mega-nav__control { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .mega-nav--desktop .mega-nav__control { color: var(--color-gray-900); text-decoration: none; transition: 0.2s; } .mega-nav--desktop .mega-nav__control::after { content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background-color: var(--color-gray-900); pointer-events: none; opacity: 0; transition: opacity 0.2s; } .mega-nav--desktop .mega-nav__control .mega-nav__arrow-icon { margin-left: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__control .mega-nav__arrow-icon { margin-left: calc(var(--spacing) * 2); } } .mega-nav--desktop .mega-nav__control:hover { cursor: pointer; background-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent); } .mega-nav--desktop .mega-nav__sub-nav-wrapper, .mega-nav--desktop .mega-nav__search { position: absolute; top: var(--mega-nav-height); left: 0; width: 100%; background-color: var(--color-white); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); max-height: calc(100vh - var(--mega-nav-height) - var(--mega-nav-offset-y, 0px)); overflow: auto; } .mega-nav--desktop .mega-nav__sub-nav, .mega-nav--desktop .mega-nav__search-inner { width: calc(100% - 2.25rem); margin: 0 auto; padding-inline: calc(var(--spacing) * 0); padding-block: calc(var(--spacing) * 12); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__sub-nav, .mega-nav--desktop .mega-nav__search-inner { padding-block: calc(var(--spacing) * 20); } } @media (min-width: 64rem) { .mega-nav--desktop .mega-nav__sub-nav, .mega-nav--desktop .mega-nav__search-inner { width: calc(100% - 4rem); } } .mega-nav--desktop .mega-nav__sub-nav .mega-nav__label, .mega-nav--desktop .mega-nav__search-inner .mega-nav__label { display: block; } .mega-nav--desktop .mega-nav__sub-nav { max-width: var(--mega-nav-content-max-width); } .mega-nav--desktop .mega-nav__search-inner { max-width: var(--container-xl); } .mega-nav--desktop .mega-nav__label { margin-bottom: calc(var(--spacing) * 5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__label { margin-bottom: calc(var(--spacing) * 8); } } .mega-nav--desktop .mega-nav__sub-item:not(:last-child) { margin-bottom: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__sub-item:not(:last-child) { margin-bottom: calc(var(--spacing) * 2); } } .mega-nav--desktop .mega-nav__sub-link { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__sub-link { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .mega-nav--desktop .mega-nav__sub-link { color: var(--color-gray-900); text-decoration: none; } .mega-nav--desktop .mega-nav__sub-link:hover { text-decoration: underline; } .mega-nav--desktop .mega-nav__quick-link { display: inline-block; margin-top: calc(var(--spacing) * 1.5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__quick-link { margin-top: calc(var(--spacing) * 2); } } .mega-nav--desktop .mega-nav__quick-link { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__quick-link { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .mega-nav--desktop .mega-nav__quick-link { color: var(--color-gray-900); text-decoration: none; } .mega-nav--desktop .mega-nav__quick-link:hover { text-decoration: underline; } .mega-nav--desktop .mega-nav__btn { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__btn { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } .mega-nav--desktop .mega-nav__btn { margin-left: calc(var(--spacing) * 3); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__btn { margin-left: calc(var(--spacing) * 5); } } .mega-nav--desktop .mega-nav__sub-nav--layout-1 .mega-nav__sub-items { display: none; } .mega-nav--desktop .mega-nav__sub-nav--layout-2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--spacing) * 3); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__sub-nav--layout-2 { gap: calc(var(--spacing) * 5); } } .mega-nav--desktop .mega-nav__sub-nav--layout-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--spacing) * 5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__sub-nav--layout-3 { gap: calc(var(--spacing) * 8); } } .mega-nav--desktop .mega-nav__sub-nav--layout-4 { text-align: center; } .mega-nav--desktop .mega-nav__sub-nav--layout-4 .mega-nav__sub-link { font-family: var(--font-noto); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .mega-nav--desktop .mega-nav__tabs-controls>*:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); } .mega-nav--desktop .mega-nav__tabs-control { display: block; width: 100%; padding: calc(var(--spacing) * 2); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__tabs-control { padding: calc(var(--spacing) * 3); } } .mega-nav--desktop .mega-nav__tabs-control { overflow: hidden; color: var(--color-gray-900); text-decoration: none; cursor: pointer; transition: 0.2s; } .mega-nav--desktop .mega-nav__tabs-control .icon { opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s; transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav--desktop .mega-nav__tabs-control:hover, .mega-nav--desktop .mega-nav__tabs-control[aria-selected=true] { color: var(--color-indigo-700); } .mega-nav--desktop .mega-nav__tabs-control[aria-selected=true] .icon { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } .mega-nav--desktop .mega-nav__tabs-img { display: block; overflow: hidden; border-radius: var(--radius-lg); transition: opacity 0.3s; } .mega-nav--desktop .mega-nav__tabs-img:hover { opacity: 0.85; } .mega-nav--desktop .mega-nav__item--expanded .mega-nav__control { background-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent); } .mega-nav--desktop .mega-nav__item--expanded .mega-nav__control::after { opacity: 1; } .mega-nav--desktop .mega-nav__item--expanded .mega-nav__sub-nav-wrapper { display: block; } .mega-nav--desktop .mega-nav__item--expanded .mega-nav__sub-nav { -webkit-animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .mega-nav--desktop:not([data-hover=on]) .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group { transform: rotate(-90deg); } .mega-nav--desktop:not([data-hover=on]) .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group>*:first-child, .mega-nav--desktop:not([data-hover=on]) .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group *:last-child { stroke-dashoffset: 0; transform: translateY(0px); } .mega-nav--desktop .mega-nav__icon-btn { border-radius: 50%; margin-left: calc(var(--spacing) * 0.5); } @media (width >= 64rem) { .mega-nav--desktop .mega-nav__icon-btn { margin-left: calc(var(--spacing) * 1); } } .mega-nav--desktop .mega-nav__icon-btn:hover, .mega-nav--desktop .mega-nav__icon-btn--state-b { background-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent); } .mega-nav--desktop .mega-nav__search--is-visible { display: block; } .mega-nav--desktop .mega-nav__search--is-visible .mega-nav__search-inner { -webkit-animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); animation: mega-nav-entry-animation 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } @-webkit-keyframes mega-nav-entry-animation { from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; transform: translateY(0px); } } @keyframes mega-nav-entry-animation { from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; transform: translateY(0px); } } [class*=mega-nav--desktop]::before { display: none; content: "mobile"; } @media (min-width: 32rem) { .mega-nav--desktop\@xs::before { content: "desktop"; } } @media (min-width: 48rem) { .mega-nav--desktop\@sm::before { content: "desktop"; } } @media (min-width: 64rem) { .mega-nav--desktop\@md::before { content: "desktop"; } } @media (min-width: 80rem) { .mega-nav--desktop\@lg::before { content: "desktop"; } } @media (min-width: 90rem) { .mega-nav--desktop\@xl::before { content: "desktop"; } } .visible { visibility: visible; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .-top-5 { top: calc(var(--spacing) * -5); } .-top-12 { top: calc(var(--spacing) * -12); } .top-1\/2 { top: calc(1/2 * 100%); } .top-24 { top: calc(var(--spacing) * 24); } .right-0 { right: calc(var(--spacing) * 0); } .right-5 { right: calc(var(--spacing) * 5); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-2 { bottom: calc(var(--spacing) * 2); } .left-2 { left: calc(var(--spacing) * 2); } .isolate { isolation: isolate; } .z-0 { z-index: 0; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[1000\] { z-index: 1000; } .z-\[1001\] { z-index: 1001; } .container { width: 100%; } @media (width >= 40rem) { .container { max-width: 40rem; } } @media (width >= 48rem) { .container { max-width: 48rem; } } @media (width >= 64rem) { .container { max-width: 64rem; } } @media (width >= 80rem) { .container { max-width: 80rem; } } @media (width >= 96rem) { .container { max-width: 96rem; } } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-auto { margin-inline: auto; } .my-8 { margin-block: calc(var(--spacing) * 8); } .my-12 { margin-block: calc(var(--spacing) * 12); } .my-16 { margin-block: calc(var(--spacing) * 16); } .prose { color: var(--tw-prose-body); max-width: none; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where([class~="lead"],[class~="is-style-lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1; margin-top: 3em; margin-bottom: 3em; border-bottom: none; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; border-left-style: solid; } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: open-quote; } .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 900; color: inherit; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 800; color: inherit; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: "`"; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: none; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: none; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: top; } .prose :where(th,td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-align: start; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .prose { --tw-prose-body: oklch(0.373 0.034 259.733); --tw-prose-headings: oklch(0.21 0.034 264.665); --tw-prose-lead: oklch(0.446 0.03 256.802); --tw-prose-links: oklch(0.21 0.034 264.665); --tw-prose-bold: oklch(0.21 0.034 264.665); --tw-prose-counters: oklch(0.551 0.027 264.364); --tw-prose-bullets: oklch(0.872 0.01 258.338); --tw-prose-hr: oklch(0.928 0.006 264.531); --tw-prose-quotes: oklch(0.21 0.034 264.665); --tw-prose-quote-borders: oklch(0.928 0.006 264.531); --tw-prose-captions: oklch(0.551 0.027 264.364); --tw-prose-kbd: oklch(0.21 0.034 264.665); --tw-prose-kbd-shadows: NaN NaN NaN; --tw-prose-code: oklch(0.21 0.034 264.665); --tw-prose-pre-code: oklch(0.928 0.006 264.531); --tw-prose-pre-bg: oklch(0.278 0.033 256.848); --tw-prose-th-borders: oklch(0.872 0.01 258.338); --tw-prose-td-borders: oklch(0.928 0.006 264.531); --tw-prose-invert-body: oklch(0.872 0.01 258.338); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(0.707 0.022 261.325); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(0.707 0.022 261.325); --tw-prose-invert-bullets: oklch(0.446 0.03 256.802); --tw-prose-invert-hr: oklch(0.373 0.034 259.733); --tw-prose-invert-quotes: oklch(0.967 0.003 264.542); --tw-prose-invert-quote-borders: oklch(0.373 0.034 259.733); --tw-prose-invert-captions: oklch(0.707 0.022 261.325); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(0.872 0.01 258.338); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(0.446 0.03 256.802); --tw-prose-invert-td-borders: oklch(0.373 0.034 259.733); font-size: 1rem; line-height: 1.75; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(tbody td,tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 0; } .prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-body); font-style: normal; font-weight: 400; } .prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: "\2014"; } .prose :where(table.has-fixed-layout):not(:where([class~="not-prose"],[class~="not-prose"] *)) { table-layout: fixed; width: 100%; } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-14 { margin-top: calc(var(--spacing) * 14); } .mt-16 { margin-top: calc(var(--spacing) * 16); } .mt-18 { margin-top: calc(var(--spacing) * 18); } .mt-24 { margin-top: calc(var(--spacing) * 24); } .\!mb-0 { margin-bottom: calc(var(--spacing) * 0) !important; } .\!mb-12 { margin-bottom: calc(var(--spacing) * 12) !important; } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-16 { margin-bottom: calc(var(--spacing) * 16); } .mb-24 { margin-bottom: calc(var(--spacing) * 24); } .mb-32 { margin-bottom: calc(var(--spacing) * 32); } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .aspect-16\/9 { aspect-ratio: 16/9; } .aspect-\[16\/9\] { aspect-ratio: 16/9; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .h-4 { height: calc(var(--spacing) * 4); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-40 { height: calc(var(--spacing) * 40); } .h-48 { height: calc(var(--spacing) * 48); } .h-\[1em\] { height: 1em; } .h-\[90vh\] { height: 90vh; } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .max-h-\[90vh\] { max-height: 90vh; } .max-h-\[100px\] { max-height: 100px; } .max-h-\[120px\] { max-height: 120px; } .max-h-\[150px\] { max-height: 150px; } .w-1\/2 { width: calc(1/2 * 100%); } .w-2xs { width: var(--container-2xs); } .w-3\/12 { width: calc(3/12 * 100%); } .w-4 { width: calc(var(--spacing) * 4); } .w-5\/12 { width: calc(5/12 * 100%); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-\[1em\] { width: 1em; } .w-\[60vw\] { width: 60vw; } .w-\[90vw\] { width: 90vw; } .w-full { width: 100%; } .w-screen { width: 100vw; } .max-w-4xl { max-width: var(--container-4xl); } .max-w-5xl { max-width: var(--container-5xl); } .max-w-6xl { max-width: var(--container-6xl); } .max-w-18 { max-width: calc(var(--spacing) * 18); } .max-w-\[90\%\] { max-width: 90%; } .max-w-\[90vw\] { max-width: 90vw; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[150px\] { max-width: 150px; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: var(--container-lg); } .max-w-none { max-width: none; } .max-w-screen-xl { max-width: var(--breakpoint-xl); } .flex-1 { flex: 1; } .flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .table-auto { table-layout: auto; } .origin-top-left { transform-origin: top left; } .translate-x-3 { --tw-translate-x: calc(var(--spacing) * 3); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-2 { --tw-translate-y: calc(var(--spacing) * -2); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-12 { --tw-translate-y: calc(var(--spacing) * -12); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-\[0\.05em\] { --tw-translate-y: 0.05em; translate: var(--tw-translate-x) var(--tw-translate-y); } .scale-100 { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); } .-rotate-90 { rotate: calc(90deg * -1); } .transform { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-10 { gap: calc(var(--spacing) * 10); } .gap-11 { gap: calc(var(--spacing) * 11); } .gap-12 { gap: calc(var(--spacing) * 12); } .gap-16 { gap: calc(var(--spacing) * 16); } .gap-20 { gap: calc(var(--spacing) * 20); } .gap-x-16 { column-gap: calc(var(--spacing) * 16); } .gap-y-8 { row-gap: calc(var(--spacing) * 8); } .gap-y-12 { row-gap: calc(var(--spacing) * 12); } .self-stretch { align-self: stretch; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .rounded-\[60px\] { border-radius: 60px; } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-solid { --tw-border-style: solid; border-style: solid; } .border-black { border-color: var(--color-black); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-zinc-300 { border-color: var(--color-zinc-300); } .border-zinc-600 { border-color: var(--color-zinc-600); } .bg-black { background-color: var(--color-black); } .bg-black\/90 { background-color: color-mix(in oklab, var(--color-black) 90%, transparent); } .bg-white { background-color: var(--color-white); } .bg-white\/50 { background-color: color-mix(in oklab, var(--color-white) 50%, transparent); } .bg-white\/90 { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } .fill-current { fill: currentColor; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-12 { padding-inline: calc(var(--spacing) * 12); } .px-16 { padding-inline: calc(var(--spacing) * 16); } .px-20 { padding-inline: calc(var(--spacing) * 20); } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-16 { padding-block: calc(var(--spacing) * 16); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-0\.5 { padding-top: calc(var(--spacing) * 0.5); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pt-24 { padding-top: calc(var(--spacing) * 24); } .pb-0\.5 { padding-bottom: calc(var(--spacing) * 0.5); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); } .pb-32 { padding-bottom: calc(var(--spacing) * 32); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .text-center { text-align: center; } .text-left { text-align: left; } .font-\[\'Lato\'\] { font-family: 'Lato'; } .font-jost { font-family: var(--font-jost); } .font-lato { font-family: var(--font-lato); } .font-noto { font-family: var(--font-noto); } .font-zen-old { font-family: var(--font-zen-old); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[2\.5em\] { font-size: 2.5em; } .text-\[11px\] { font-size: 11px; } .text-\[72px\] { font-size: 72px; } .text-\[100px\] { font-size: 100px; } .leading-7 { --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } .leading-9 { --tw-leading: calc(var(--spacing) * 9); line-height: calc(var(--spacing) * 9); } .leading-10 { --tw-leading: calc(var(--spacing) * 10); line-height: calc(var(--spacing) * 10); } .leading-12 { --tw-leading: calc(var(--spacing) * 12); line-height: calc(var(--spacing) * 12); } .leading-\[1\.05em\] { --tw-leading: 1.05em; line-height: 1.05em; } .leading-\[1\.25\] { --tw-leading: 1.25; line-height: 1.25; } .leading-\[1\.25em\] { --tw-leading: 1.25em; line-height: 1.25em; } .leading-\[1em\] { --tw-leading: 1em; line-height: 1em; } .leading-\[56px\] { --tw-leading: 56px; line-height: 56px; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-normal { --tw-leading: var(--leading-normal); line-height: var(--leading-normal); } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[3\.64px\] { --tw-tracking: 3.64px; letter-spacing: 3.64px; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .text-black { color: var(--color-black); } .text-gray-700 { color: var(--color-gray-700); } .text-inherit { color: inherit; } .text-neutral-600 { color: var(--color-neutral-600); } .text-red-500 { color: var(--color-red-500); } .text-white { color: var(--color-white); } .text-zinc-600 { color: var(--color-zinc-600); } .text-zinc-700 { color: var(--color-zinc-700); } .uppercase { text-transform: uppercase; } .underline { text-decoration-line: underline; } .mix-blend-difference { mix-blend-mode: difference; } .shadow-\[1px_3px_8px_0px_rgba\(0\,0\,0\,0\.10\)\] { --tw-shadow: 1px 3px 8px 0px var(--tw-shadow-color, rgba(0,0,0,0.10)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[5px_14px_15px_0px_rgba\(0\,0\,0\,0\.09\)\] { --tw-shadow: 5px 14px 15px 0px var(--tw-shadow-color, rgba(0,0,0,0.09)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[11px_31px_20px_0px_rgba\(0\,0\,0\,0\.05\)\] { --tw-shadow: 11px 31px 20px 0px var(--tw-shadow-color, rgba(0,0,0,0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[20px_55px_23px_0px_rgba\(0\,0\,0\,0\.01\)\] { --tw-shadow: 20px 55px 23px 0px var(--tw-shadow-color, rgba(0,0,0,0.01)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[32px_85px_25px_0px_rgba\(0\,0\,0\,0\.00\)\] { --tw-shadow: 32px 85px 25px 0px var(--tw-shadow-color, rgba(0,0,0,0.00)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .backdrop-blur-\[20px\] { --tw-backdrop-blur: blur(20px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .duration-600 { --tw-duration: 600ms; transition-duration: 600ms; } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .content-none { --tw-content: none; content: none; } .prose-neutral { --tw-prose-body: oklch(0.371 0 0); --tw-prose-headings: oklch(0.205 0 0); --tw-prose-lead: oklch(0.439 0 0); --tw-prose-links: oklch(0.205 0 0); --tw-prose-bold: oklch(0.205 0 0); --tw-prose-counters: oklch(0.556 0 0); --tw-prose-bullets: oklch(0.87 0 0); --tw-prose-hr: oklch(0.922 0 0); --tw-prose-quotes: oklch(0.205 0 0); --tw-prose-quote-borders: oklch(0.922 0 0); --tw-prose-captions: oklch(0.556 0 0); --tw-prose-kbd: oklch(0.205 0 0); --tw-prose-kbd-shadows: NaN NaN NaN; --tw-prose-code: oklch(0.205 0 0); --tw-prose-pre-code: oklch(0.922 0 0); --tw-prose-pre-bg: oklch(0.269 0 0); --tw-prose-th-borders: oklch(0.87 0 0); --tw-prose-td-borders: oklch(0.922 0 0); --tw-prose-invert-body: oklch(0.87 0 0); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(0.708 0 0); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(0.708 0 0); --tw-prose-invert-bullets: oklch(0.439 0 0); --tw-prose-invert-hr: oklch(0.371 0 0); --tw-prose-invert-quotes: oklch(0.97 0 0); --tw-prose-invert-quote-borders: oklch(0.371 0 0); --tw-prose-invert-captions: oklch(0.708 0 0); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(0.87 0 0); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: oklch(0.439 0 0); --tw-prose-invert-td-borders: oklch(0.371 0 0); } @media (hover: hover) { .group-hover\:scale-105:is(:where(.group):hover *) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { .group-hover\:text-zinc-600:is(:where(.group):hover *) { color: var(--color-zinc-600); } } @media (hover: hover) { .hover\:scale-105:hover { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (hover: hover) { .hover\:bg-black:hover { background-color: var(--color-black); } } @media (hover: hover) { .hover\:text-black:hover { color: var(--color-black); } } @media (hover: hover) { .hover\:text-blue-600:hover { color: var(--color-blue-600); } } @media (hover: hover) { .hover\:text-gray-300:hover { color: var(--color-gray-300); } } @media (hover: hover) { .hover\:text-white:hover { color: var(--color-white); } } @media (width < 40rem) { .max-sm\:my-6 { margin-block: calc(var(--spacing) * 6); } } @media (width < 40rem) { .max-sm\:mt-4 { margin-top: calc(var(--spacing) * 4); } } @media (width < 40rem) { .max-sm\:mb-32 { margin-bottom: calc(var(--spacing) * 32); } } @media (width < 40rem) { .max-sm\:ml-4 { margin-left: calc(var(--spacing) * 4); } } @media (width < 40rem) { .max-sm\:hidden { display: none; } } @media (width < 40rem) { .max-sm\:inline-block { display: inline-block; } } @media (width < 40rem) { .max-sm\:aspect-square { aspect-ratio: 1 / 1; } } @media (width < 40rem) { .max-sm\:h-1\/2 { height: calc(1/2 * 100%); } } @media (width < 40rem) { .max-sm\:w-4\/12 { width: calc(4/12 * 100%); } } @media (width < 40rem) { .max-sm\:w-full { width: 100%; } } @media (width < 40rem) { .max-sm\:max-w-11\/12 { max-width: calc(11/12 * 100%); } } @media (width < 40rem) { .max-sm\:flex-col { flex-direction: column; } } @media (width < 40rem) { .max-sm\:gap-4 { gap: calc(var(--spacing) * 4); } } @media (width < 40rem) { .max-sm\:gap-24 { gap: calc(var(--spacing) * 24); } } @media (width < 40rem) { .max-sm\:overflow-hidden { overflow: hidden; } } @media (width < 40rem) { .max-sm\:px-2 { padding-inline: calc(var(--spacing) * 2); } } @media (width < 40rem) { .max-sm\:px-5 { padding-inline: calc(var(--spacing) * 5); } } @media (width < 40rem) { .max-sm\:pt-2 { padding-top: calc(var(--spacing) * 2); } } @media (width < 40rem) { .max-sm\:\!text-sm { font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; } } @media (width < 40rem) { .max-sm\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } @media (width < 40rem) { .max-sm\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } @media (width < 40rem) { .max-sm\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (width < 40rem) { .max-sm\:text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } @media (width < 40rem) { .max-sm\:shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } @media (width >= 40rem) { .sm\:absolute { position: absolute; } } @media (width >= 40rem) { .sm\:top-1\/2 { top: calc(1/2 * 100%); } } @media (width >= 40rem) { .sm\:bottom-8 { bottom: calc(var(--spacing) * 8); } } @media (width >= 40rem) { .sm\:left-1\/3 { left: calc(1/3 * 100%); } } @media (width >= 40rem) { .sm\:my-4 { margin-block: calc(var(--spacing) * 4); } } @media (width >= 40rem) { .sm\:mt-2 { margin-top: calc(var(--spacing) * 2); } } @media (width >= 40rem) { .sm\:mt-4 { margin-top: calc(var(--spacing) * 4); } } @media (width >= 40rem) { .sm\:mt-8 { margin-top: calc(var(--spacing) * 8); } } @media (width >= 40rem) { .sm\:hidden { display: none; } } @media (width >= 40rem) { .sm\:aspect-square { aspect-ratio: 1 / 1; } } @media (width >= 40rem) { .sm\:h-48 { height: calc(var(--spacing) * 48); } } @media (width >= 40rem) { .sm\:w-2\/3 { width: calc(2/3 * 100%); } } @media (width >= 40rem) { .sm\:w-40 { width: calc(var(--spacing) * 40); } } @media (width >= 40rem) { .sm\:w-48 { width: calc(var(--spacing) * 48); } } @media (width >= 40rem) { .sm\:w-\[calc\(50\%-1\.75rem\)\] { width: calc(50% - 1.75rem); } } @media (width >= 40rem) { .sm\:max-w-64 { max-width: calc(var(--spacing) * 64); } } @media (width >= 40rem) { .sm\:max-w-\[120px\] { max-width: 120px; } } @media (width >= 40rem) { .sm\:-translate-4\.5 { --tw-translate-x: calc(var(--spacing) * -4.5); --tw-translate-y: calc(var(--spacing) * -4.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 40rem) { .sm\:-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 40rem) { .sm\:flex-col { flex-direction: column; } } @media (width >= 40rem) { .sm\:flex-row { flex-direction: row; } } @media (width >= 40rem) { .sm\:items-center { align-items: center; } } @media (width >= 40rem) { .sm\:items-end { align-items: flex-end; } } @media (width >= 40rem) { .sm\:items-start { align-items: flex-start; } } @media (width >= 40rem) { .sm\:justify-between { justify-content: space-between; } } @media (width >= 40rem) { .sm\:justify-center { justify-content: center; } } @media (width >= 40rem) { .sm\:justify-start { justify-content: flex-start; } } @media (width >= 40rem) { .sm\:gap-2 { gap: calc(var(--spacing) * 2); } } @media (width >= 40rem) { .sm\:gap-4 { gap: calc(var(--spacing) * 4); } } @media (width >= 40rem) { .sm\:gap-6 { gap: calc(var(--spacing) * 6); } } @media (width >= 40rem) { .sm\:gap-9 { gap: calc(var(--spacing) * 9); } } @media (width >= 40rem) { .sm\:gap-12 { gap: calc(var(--spacing) * 12); } } @media (width >= 40rem) { .sm\:gap-14 { gap: calc(var(--spacing) * 14); } } @media (width >= 40rem) { .sm\:gap-y-24 { row-gap: calc(var(--spacing) * 24); } } @media (width >= 40rem) { .sm\:object-contain { object-fit: contain; } } @media (width >= 40rem) { .sm\:px-12 { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 40rem) { .sm\:px-16 { padding-inline: calc(var(--spacing) * 16); } } @media (width >= 40rem) { .sm\:py-10 { padding-block: calc(var(--spacing) * 10); } } @media (width >= 40rem) { .sm\:py-24 { padding-block: calc(var(--spacing) * 24); } } @media (width >= 40rem) { .sm\:pb-1 { padding-bottom: calc(var(--spacing) * 1); } } @media (width >= 40rem) { .sm\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } @media (width >= 40rem) { .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } @media (width >= 40rem) { .sm\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (width >= 40rem) { .sm\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } @media (width >= 40rem) { .sm\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } @media (width >= 40rem) { .sm\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (width >= 40rem) { .sm\:leading-12 { --tw-leading: calc(var(--spacing) * 12); line-height: calc(var(--spacing) * 12); } } @media (width >= 40rem) { .sm\:leading-14 { --tw-leading: calc(var(--spacing) * 14); line-height: calc(var(--spacing) * 14); } } @media (width >= 40rem) { .sm\:font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } @media (width >= 48rem) { .md\:mx-auto { margin-inline: auto; } } @media (width >= 48rem) { .md\:mb-6 { margin-bottom: calc(var(--spacing) * 6); } } @media (width >= 48rem) { .md\:block { display: block; } } @media (width >= 48rem) { .md\:hidden { display: none; } } @media (width >= 48rem) { .md\:aspect-23\/9 { aspect-ratio: 23/9; } } @media (width >= 48rem) { .md\:h-screen { height: 100vh; } } @media (width >= 48rem) { .md\:w-1\/2 { width: calc(1/2 * 100%); } } @media (width >= 48rem) { .md\:max-w-2\/3 { max-width: calc(2/3 * 100%); } } @media (width >= 48rem) { .md\:-translate-4\.5 { --tw-translate-x: calc(var(--spacing) * -4.5); --tw-translate-y: calc(var(--spacing) * -4.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 48rem) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 48rem) { .md\:flex-row { flex-direction: row; } } @media (width >= 48rem) { .md\:gap-2 { gap: calc(var(--spacing) * 2); } } @media (width >= 48rem) { .md\:gap-8 { gap: calc(var(--spacing) * 8); } } @media (width >= 48rem) { .md\:gap-12 { gap: calc(var(--spacing) * 12); } } @media (width >= 48rem) { .md\:gap-20 { gap: calc(var(--spacing) * 20); } } @media (width >= 48rem) { .md\:rounded-lg { border-radius: var(--radius-lg); } } @media (width >= 48rem) { .md\:pt-3 { padding-top: calc(var(--spacing) * 3); } } @media (width >= 48rem) { .md\:pl-8 { padding-left: calc(var(--spacing) * 8); } } @media (width >= 48rem) { .md\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } @media (width >= 48rem) { .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } @media (width >= 48rem) { .md\:text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } } @media (width >= 48rem) { .md\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } @media (width >= 48rem) { .md\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (width >= 48rem) { .md\:leading-18 { --tw-leading: calc(var(--spacing) * 18); line-height: calc(var(--spacing) * 18); } } @media (width >= 64rem) { .lg\:top-0 { top: calc(var(--spacing) * 0); } } @media (width >= 64rem) { .lg\:left-5 { left: calc(var(--spacing) * 5); } } @media (width >= 64rem) { .lg\:my-6 { margin-block: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .lg\:my-16 { margin-block: calc(var(--spacing) * 16); } } @media (width >= 64rem) { .lg\:my-auto { margin-block: auto; } } @media (width >= 64rem) { .lg\:mb-10 { margin-bottom: calc(var(--spacing) * 10); } } @media (width >= 64rem) { .lg\:mb-12 { margin-bottom: calc(var(--spacing) * 12); } } @media (width >= 64rem) { .lg\:mb-24 { margin-bottom: calc(var(--spacing) * 24); } } @media (width >= 64rem) { .lg\:block { display: block; } } @media (width >= 64rem) { .lg\:flex { display: flex; } } @media (width >= 64rem) { .lg\:hidden { display: none; } } @media (width >= 64rem) { .lg\:aspect-square { aspect-ratio: 1 / 1; } } @media (width >= 64rem) { .lg\:h-screen { height: 100vh; } } @media (width >= 64rem) { .lg\:w-1\/2 { width: calc(1/2 * 100%); } } @media (width >= 64rem) { .lg\:w-1\/3 { width: calc(1/3 * 100%); } } @media (width >= 64rem) { .lg\:w-2\/3 { width: calc(2/3 * 100%); } } @media (width >= 64rem) { .lg\:w-5\/12 { width: calc(5/12 * 100%); } } @media (width >= 64rem) { .lg\:w-7\/12 { width: calc(7/12 * 100%); } } @media (width >= 64rem) { .lg\:w-\[95\%\] { width: 95%; } } @media (width >= 64rem) { .lg\:max-w-4\/12 { max-width: calc(4/12 * 100%); } } @media (width >= 64rem) { .lg\:max-w-\[320px\] { max-width: 320px; } } @media (width >= 64rem) { .lg\:max-w-\[455px\] { max-width: 455px; } } @media (width >= 64rem) { .lg\:-translate-y-0 { --tw-translate-y: calc(var(--spacing) * -0); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 64rem) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (width >= 64rem) { .lg\:flex-row { flex-direction: row; } } @media (width >= 64rem) { .lg\:items-center { align-items: center; } } @media (width >= 64rem) { .lg\:gap-6 { gap: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .lg\:gap-8 { gap: calc(var(--spacing) * 8); } } @media (width >= 64rem) { .lg\:gap-11 { gap: calc(var(--spacing) * 11); } } @media (width >= 64rem) { .lg\:gap-16 { gap: calc(var(--spacing) * 16); } } @media (width >= 64rem) { .lg\:px-0 { padding-inline: calc(var(--spacing) * 0); } } @media (width >= 64rem) { .lg\:px-4 { padding-inline: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .lg\:px-12 { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 64rem) { .lg\:px-16 { padding-inline: calc(var(--spacing) * 16); } } @media (width >= 64rem) { .lg\:py-16 { padding-block: calc(var(--spacing) * 16); } } @media (width >= 64rem) { .lg\:pt-6 { padding-top: calc(var(--spacing) * 6); } } @media (width >= 64rem) { .lg\:pt-12 { padding-top: calc(var(--spacing) * 12); } } @media (width >= 64rem) { .lg\:pb-8 { padding-bottom: calc(var(--spacing) * 8); } } @media (width >= 64rem) { .lg\:pb-28 { padding-bottom: calc(var(--spacing) * 28); } } @media (width >= 64rem) { .lg\:pl-4 { padding-left: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .lg\:text-center { text-align: center; } } @media (width >= 64rem) { .lg\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } @media (width >= 64rem) { .lg\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } @media (width >= 64rem) { .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } @media (width >= 64rem) { .lg\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } } @media (width >= 64rem) { .lg\:text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } } @media (width >= 64rem) { .lg\:text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } } @media (width >= 64rem) { .lg\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (width >= 64rem) { .lg\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } @media (width >= 64rem) { .lg\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } @media (width >= 64rem) { .lg\:text-\[160px\] { font-size: 160px; } } @media (width >= 64rem) { .lg\:leading-24 { --tw-leading: calc(var(--spacing) * 24); line-height: calc(var(--spacing) * 24); } } @media (width >= 80rem) { .xl\:absolute { position: absolute; } } @media (width >= 80rem) { .xl\:top-1\/2 { top: calc(1/2 * 100%); } } @media (width >= 80rem) { .xl\:left-5\/12 { left: calc(5/12 * 100%); } } @media (width >= 80rem) { .xl\:h-screen { height: 100vh; } } @media (width >= 80rem) { .xl\:w-1\/2 { width: calc(1/2 * 100%); } } @media (width >= 80rem) { .xl\:max-w-2\/3 { max-width: calc(2/3 * 100%); } } @media (width >= 80rem) { .xl\:-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 80rem) { .xl\:px-8 { padding-inline: calc(var(--spacing) * 8); } } @media (width >= 80rem) { .xl\:px-12 { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 80rem) { .xl\:py-4 { padding-block: calc(var(--spacing) * 4); } } @media (width >= 80rem) { .xl\:py-10 { padding-block: calc(var(--spacing) * 10); } } @media (width >= 96rem) { .\32 xl\:left-1\/2 { left: calc(1/2 * 100%); } } @media (width >= 96rem) { .\32 xl\:left-7\/12 { left: calc(7/12 * 100%); } } @media (width >= 96rem) { .\32 xl\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .prose-a\:text-primary :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) { color: var(--color-primary); } .page-title, .entry-title { margin-inline: auto; margin-bottom: calc(var(--spacing) * 6); max-width: var(--container-content); font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); color: var(--color-neutral-900); } .page-content>*, .entry-content>* { margin-inline: auto; max-width: var(--container-content); } .entry-content>.alignwide { max-width: var(--container-wide); } .entry-content>.alignfull { max-width: none; } .entry-content>.alignleft { float: left; margin-right: calc(var(--spacing) * 8); } .entry-content>.alignright { float: right; margin-left: calc(var(--spacing) * 8); } .c-hero__sub { margin-top: calc(var(--spacing) * 16); display: flex; width: 100%; flex-direction: column; } @media (width >= 48rem) { .c-hero__sub { margin-top: calc(var(--spacing) * 18); } } @media (width >= 48rem) { .c-hero__sub { flex-direction: row; } } @media (width >= 64rem) { .c-hero__sub { margin-top: calc(var(--spacing) * 24); } } @media (width >= 80rem) { .c-hero__sub { margin-top: calc(var(--spacing) * 32); } } :is(.c-hero__sub .c-title__h1) .c-title__en { margin-bottom: calc(var(--spacing) * 4); display: block; justify-content: flex-start; border-left-style: var(--tw-border-style); border-left-width: 1px; border-color: var(--color-zinc-500); padding-top: calc(var(--spacing) * 0.5); padding-bottom: calc(var(--spacing) * 0.5); padding-left: calc(var(--spacing) * 4); font-family: var(--font-lato); font-size: .5em; --tw-tracking: 0.7em; letter-spacing: 0.7em; color: var(--color-zinc-600); text-transform: uppercase; } :is(.c-hero__sub .c-title__h1) .c-title__ja { display: block; font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); color: var(--color-black); } @media (width >= 64rem) { :is(.c-hero__sub .c-title__h1) .c-title__ja { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } } @media (width >= 80rem) { :is(.c-hero__sub .c-title__h1) .c-title__ja { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } } .c-hero__sub.is-others { height: 200px; justify-content: center; } @media (width >= 64rem) { .c-hero__sub.is-others { height: 240px; } } .c-hero__sub.is-others .c-hero__sub-copy { max-width: 100vw; } .c-hero__sub-container { position: relative; margin-inline: auto; display: flex; width: 100%; max-width: 1920px; flex-direction: column-reverse; justify-content: flex-end; } @media (width >= 48rem) { .c-hero__sub-container { max-height: 400px; } } @media (width >= 48rem) { .c-hero__sub-container { flex-direction: row; } } @media (width >= 64rem) { .c-hero__sub-container { max-height: 590px; } } .c-hero__sub-copy { display: flex; flex-direction: column; background-color: color-mix(in oklab, var(--color-white) 50%, transparent); padding: calc(var(--spacing) * 8); } @media (width >= 48rem) { .c-hero__sub-copy { position: absolute; } } @media (width >= 48rem) { .c-hero__sub-copy { top: calc(1/2 * 100%); } } @media (width >= 48rem) { .c-hero__sub-copy { left: calc(var(--spacing) * 0); } } @media (width >= 48rem) { .c-hero__sub-copy { max-width: calc(6/12 * 100%); } } @media (width >= 48rem) { .c-hero__sub-copy { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } @media (width >= 64rem) { .c-hero__sub-copy { justify-content: center; } } @media (width >= 80rem) { .c-hero__sub-copy { padding-inline: calc(var(--spacing) * 12); } } @media (width >= 80rem) { .c-hero__sub-copy { padding-block: calc(var(--spacing) * 14); } } .c-hero__sub-copy { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .c-hero__sub-copy.is-others { max-width: 100vw; } .c-hero__sub-copy p { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .c-hero__sub-image { height: 100%; } .c-hero__sub-image img,.c-hero__sub-image video { height: 100%; width: 100%; object-fit: cover; } .c-subsection .c-title { margin-bottom: calc(var(--spacing) * 8); } @media (width >= 64rem) { .c-subsection .c-title { margin-bottom: calc(var(--spacing) * 12); } } .c-table__blackwhite { margin-block: calc(var(--spacing) * 12); display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--spacing) * 4); } .c-table__blackwhite__title { width: 100%; border-style: var(--tw-border-style); border-width: 4px; border-color: var(--color-black); background-color: var(--color-black); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 1.5); padding-bottom: calc(var(--spacing) * 1); text-align: center; font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); color: var(--color-white); } @media (width >= 64rem) { .c-table__blackwhite__title { width: calc(var(--spacing) * 64); } } @media (width >= 64rem) { .c-table__blackwhite__title { padding-block: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .c-table__blackwhite__title { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .c-table__blackwhite__item { width: 100%; border-style: var(--tw-border-style); border-width: 4px; border-color: var(--color-black); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-black); } @media (width >= 64rem) { .c-table__blackwhite__item { padding-block: calc(var(--spacing) * 4); } } @media (width >= 64rem) { .c-table__blackwhite__item { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .c-2clm { display: flex; flex-direction: column; gap: calc(var(--spacing) * 16); } .c-2clm + .c-2clm { margin-top: calc(var(--spacing) * 24); } @media (width >= 64rem) { .c-2clm.is-reverse .c-2clm__item { flex-direction: row-reverse; } } .c-2clm__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--spacing) * 12); } @media (width >= 64rem) { .c-2clm__item { flex-direction: row; } } @media (width >= 64rem) { .c-2clm__item { gap: calc(var(--spacing) * 10); } } @media (width >= 80rem) { .c-2clm__item { gap: calc(var(--spacing) * 16); } } .c-2clm__item .c-video { width: 100%; } @media (width >= 64rem) { .c-2clm__item .c-video { width: calc(5/12 * 100%); } } .c-2clm__item .c-2clm__item__text { display: flex; width: 100%; flex-direction: column; justify-content: center; } @media (width >= 64rem) { .c-2clm__item .c-2clm__item__text { width: calc(6/12 * 100%); } } .c-2clm__item .c-title { margin-bottom: calc(var(--spacing) * 4); display: flex; flex-direction: column; align-items: flex-start; } .c-2clm__item .c-title__ja { margin-top: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .c-list__check { margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 6); display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); } @media (width >= 64rem) { .c-list__check { margin-bottom: calc(var(--spacing) * 6); } } .c-list__check li { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 2); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } :is(.c-list__check li)::before { content: var(--tw-content); display: inline-block; } :is(.c-list__check li)::before { content: var(--tw-content); height: calc(var(--spacing) * 6); } :is(.c-list__check li)::before { content: var(--tw-content); width: calc(var(--spacing) * 6); } :is(.c-list__check li)::before { content: var(--tw-content); flex-shrink: 0; } :is(.c-list__check li)::before { content: var(--tw-content); background-image: url(//hioryes.jp/new_wp/wp-content/themes/HIO__20250620/./img/common/icon-check.svg); } :is(.c-list__check li)::before { content: var(--tw-content); background-size: contain; } :is(.c-list__check li)::before { content: var(--tw-content); background-repeat: no-repeat; } :is(.c-list__check li)::before { content: var(--tw-content); --tw-content: ''; content: var(--tw-content); } @media (width < 40rem) { .c-list__check li { margin-top: calc(var(--spacing) * 2); } } .p-service__flow { margin-top: calc(var(--spacing) * 16); display: flex; flex-direction: column; gap: calc(var(--spacing) * 12); } :is(.p-service__flow li) h3 { display: flex; align-items: center; gap: calc(var(--spacing) * 4); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } :is(.p-service__flow li) .num { display: flex; height: calc(var(--spacing) * 12); width: calc(var(--spacing) * 12); align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-black); font-family: var(--font-lato); font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-black); } :is(.p-service__flow li) p { padding-left: calc(var(--spacing) * 16); } .c-archivelist { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; row-gap: calc(var(--spacing) * 12); } .c-archivelist::after { display: block; width: 100%; --tw-content: ''; content: var(--tw-content); } @media (width >= 48rem) { .c-archivelist::after { width: calc(1/2 * 100%); } } @media (width >= 64rem) { .c-archivelist::after { width: calc(1/3 * 100%); } } .c-archivelist__item { display: flex; width: 100%; flex-direction: column; padding-inline: calc(var(--spacing) * 6); } @media (width >= 48rem) { .c-archivelist__item { width: calc(1/2 * 100%); } } @media (width >= 64rem) { .c-archivelist__item { width: calc(1/3 * 100%); } } .c-archivelist__img { margin-bottom: calc(var(--spacing) * 6); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .c-archivelist__img img { aspect-ratio: var(--aspect-video); height: 100%; width: 100%; object-fit: cover; } .c-archivelist__title { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .c-pagination { margin-top: calc(var(--spacing) * 12); display: flex; flex-direction: row; justify-content: center; gap: calc(var(--spacing) * 4); } .c-cta { position: relative; padding: 24px; transform: translate(-6px, -6px); box-shadow: 10px 10px 0 #242424; margin-top: 64px; background: #fff; } .c-cta .wp-block-heading { margin-top: 0; } .c-cta ul { margin-block: calc(var(--spacing) * 8); } @media (min-width: 768px) { .c-cta { padding: 40px; } } .c-breadcrumb { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-zinc-300); padding-block: calc(var(--spacing) * 2); } .c-breadcrumb__container { margin-inline: auto; padding-inline: calc(var(--spacing) * 4); } .c-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .c-breadcrumb__item { display: flex; align-items: center; } .c-breadcrumb__item:not(:last-child)::after { content: "/"; margin-inline: calc(var(--spacing) * 2); color: var(--color-gray-400); } .c-breadcrumb__link { color: var(--color-blue-500); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 200ms; transition-duration: 200ms; } @media (hover: hover) { .c-breadcrumb__link:hover { text-decoration-line: underline; } } .c-breadcrumb__text { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .c-breadcrumb__item:last-child .c-breadcrumb__text { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-gray-700); } @media (max-width: 640px) { .c-breadcrumb__list { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .c-breadcrumb__text { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .p-contact__hero { margin-bottom: calc(var(--spacing) * 0); } .p-contact__body { background-color: #C8D6E8; padding-block: calc(var(--spacing) * 12); } .c-contact { position: sticky; top: calc(var(--spacing) * 14); } .c-contact__headline { margin-bottom: 0; } .c-contact__inner { position: relative; display: flex; height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding-inline: calc(var(--spacing) * 4); } @media (width >= 64rem) { .c-contact__inner { padding-inline: calc(var(--spacing) * 16); } } .c-contact__inner__figure { margin: 0; height: 552px; } @media (min-width: 768px) { .c-contact__inner__figure { position: absolute; left: 0; top: 0; width: calc(50% - 40px); height: 100%; } } .c-contact__inner__figure__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-contact__label { position: relative; mix-blend-mode: difference; z-index: 1; margin: -30px -1.5rem 0 40px; } @media (min-width: 768px) { .c-contact__label { margin: -30px 0 -20px -90px; } } .c-contact__label__image { width: 320px; max-width: 100%; } @media (min-width: 768px) { .c-contact__label__image { display: block; width: 530px; } } .c-contact__body { padding-left: 1.5rem; padding-right: 1.5rem; width: 100%; margin: 0 auto; } @media (min-width: 768px) { .c-contact__body { padding: 0; margin: 0; } } .c-contact__body__desc { margin-bottom: 40px; } .c-contact__body p { margin: 0; } .c-contact__body label { display: block; width: 100%; margin-top: 24px; } .c-contact__body label small { font-size: 0.625rem; color: #ff5050; margin-left: 10px; } .c-contact__body label input[type=text], .c-contact__body label input[type=email], .c-contact__body label input[type=tel], .c-contact__body label select { margin-top: 6px; width: 100%; background: #fff; border: 1px solid #ddd; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.06); font-size: initial; font-family: inherit; padding: 0.5rem; } .c-contact__body label select { padding: 1em 0.5rem; } .c-contact__body label textarea { margin-top: 6px; width: 100%; height: 120px; background: #fff; border: 1px solid #ddd; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.06); font-size: initial; font-family: inherit; padding: 0.5rem; } .c-contact__body a { color: inherit; } .c-contact__body a:hover { color: inherit; text-decoration: none; } .c-contact__body .wpcf7-spinner { display: block; margin: 1rem auto 0; } .c-slideshow { position: relative; width: 100%; overflow: hidden; } .c-slideshow__container { position: relative; width: 100%; } .c-slideshow__item { position: absolute; aspect-ratio: 23/9; width: 100%; opacity: 0%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; } .c-slideshow__item img { height: 100%; width: 100%; object-fit: cover; } .c-slideshow__item.active { position: relative; opacity: 100%; } .marquee-container { overflow: hidden; width: 100%; } .marquee-slider { --total-items: 16; --item-width: 150px; --gap: 8px; animation: marquee calc(var(--total-items) * 3s) linear infinite; gap: var(--gap); transform: rotate(5deg); } .marquee-slider.is-reverse { --total-items-2: 16; --item-width-2: 120px; --gap-2: 8px; animation: marquee-reverse calc(var(--total-items-2) * 3s) linear infinite; gap: var(--gap-2); flex-direction: row-reverse; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc((var(--item-width) + var(--gap)) * (var(--total-items) / 2) * -1)); } } @keyframes marquee-reverse { 0% { transform: translateX(0); } 100% { transform: translateX(calc((var(--item-width) + var(--gap)) * (var(--total-items) / 2))); } } @layer utilities { .animate-marquee { animation: marquee 30s linear infinite; } .animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-offset))); } } @keyframes marquee-reverse { from { transform: translateX(0); } to { transform: translateX(calc(var(--marquee-offset))); } } .service-copy-rotation { position: relative; height: 60px; width: 100%; overflow: hidden; } .service-copy-rotation .js-fade-text { transition: opacity 1s ease-in-out; width: 100%; } .p-home__client-list .client-group h5 { color: var(--color-zinc-800); } .p-home__client-list ul { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; } .p-home__client-list ul::-webkit-scrollbar { height: 6px; } .p-home__client-list ul::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 3px; } .c-cta__gradient { position: relative; border-radius: var(--radius-4xl); border-style: var(--tw-border-style); border-width: 2px; border-color: color-mix(in oklab, var(--color-white) 20%, transparent); --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .c-cta__gradient::before { content: ''; position: absolute; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: calc(1 * -1); height: 100%; width: 100%; animation: Grad 8s infinite alternate; border-radius: var(--radius-4xl); background-image: linear-gradient(150deg,#a6d900 0%,#ff4454 100%); opacity: 30%; } @keyframes Grad { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0); } @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0); } @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0); } @property --tw-skew-x { syntax: "*"; inherits: false; initial-value: skewX(0); } @property --tw-skew-y { syntax: "*"; inherits: false; initial-value: skewY(0); } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } .lazyload{background-image:none !important}.lazyload:before{background-image:none !important} #masthead{backdrop-filter:blur(24px)}