@charset "UTF-8";
@layer base, module, layout, utility;
@layer base {
  :root {
    --color-primitive-blue-50: #e8f1fe;
    --color-primitive-blue-100: #d9e6ff;
    --color-primitive-blue-200: #c5d7fb;
    --color-primitive-blue-300: #9db7f9;
    --color-primitive-blue-400: #7096f8;
    --color-primitive-blue-500: #4979f5;
    --color-primitive-blue-600: #3460fb;
    --color-primitive-blue-700: #264af4;
    --color-primitive-blue-800: #0031d8;
    --color-primitive-blue-900: #0017c1;
    --color-primitive-blue-1000: #00118f;
    --color-primitive-blue-1100: #000071;
    --color-primitive-blue-1200: #000060;
    --color-primitive-light-blue-50: #f0f9ff;
    --color-primitive-light-blue-100: #dcf0ff;
    --color-primitive-light-blue-200: #c0e4ff;
    --color-primitive-light-blue-300: #97d3ff;
    --color-primitive-light-blue-400: #57b8ff;
    --color-primitive-light-blue-500: #39abff;
    --color-primitive-light-blue-600: #008bf2;
    --color-primitive-light-blue-700: #0877d7;
    --color-primitive-light-blue-800: #0066be;
    --color-primitive-light-blue-900: #0055ad;
    --color-primitive-light-blue-1000: #00428c;
    --color-primitive-light-blue-1100: #00316a;
    --color-primitive-light-blue-1200: #00234b;
    --color-primitive-cyan-50: #e9f7f9;
    --color-primitive-cyan-100: #c8f8ff;
    --color-primitive-cyan-200: #99f2ff;
    --color-primitive-cyan-300: #79e2f2;
    --color-primitive-cyan-400: #2bc8e4;
    --color-primitive-cyan-500: #01b7d6;
    --color-primitive-cyan-600: #00a3bf;
    --color-primitive-cyan-700: #008da6;
    --color-primitive-cyan-800: #008299;
    --color-primitive-cyan-900: #006f83;
    --color-primitive-cyan-1000: #006173;
    --color-primitive-cyan-1100: #004c59;
    --color-primitive-cyan-1200: #003741;
    --color-primitive-green-50: #e6f5ec;
    --color-primitive-green-100: #c2e5d1;
    --color-primitive-green-200: #9bd4b5;
    --color-primitive-green-300: #71c598;
    --color-primitive-green-400: #51b883;
    --color-primitive-green-500: #2cac6e;
    --color-primitive-green-600: #259d63;
    --color-primitive-green-700: #1d8b56;
    --color-primitive-green-800: #197a4b;
    --color-primitive-green-900: #115a36;
    --color-primitive-green-1000: #0c472a;
    --color-primitive-green-1100: #08351f;
    --color-primitive-green-1200: #032213;
    --color-primitive-lime-50: #ebfad9;
    --color-primitive-lime-100: #d0f5a2;
    --color-primitive-lime-200: #c0f354;
    --color-primitive-lime-300: #ade830;
    --color-primitive-lime-400: #9ddd15;
    --color-primitive-lime-500: #8cc80c;
    --color-primitive-lime-600: #7eb40d;
    --color-primitive-lime-700: #6fa104;
    --color-primitive-lime-800: #618e00;
    --color-primitive-lime-900: #507500;
    --color-primitive-lime-1000: #3e5a00;
    --color-primitive-lime-1100: #2c4100;
    --color-primitive-lime-1200: #1e2d00;
    --color-primitive-yellow-50: #fbf5e0;
    --color-primitive-yellow-100: #fff0b3;
    --color-primitive-yellow-200: #ffe380;
    --color-primitive-yellow-300: #ffd43d;
    --color-primitive-yellow-400: #ffc700;
    --color-primitive-yellow-500: #ebb700;
    --color-primitive-yellow-600: #d2a400;
    --color-primitive-yellow-700: #b78f00;
    --color-primitive-yellow-800: #a58000;
    --color-primitive-yellow-900: #927200;
    --color-primitive-yellow-1000: #806300;
    --color-primitive-yellow-1100: #6e5600;
    --color-primitive-yellow-1200: #604b00;
    --color-primitive-orange-50: #ffeee2;
    --color-primitive-orange-100: #ffdfca;
    --color-primitive-orange-200: #ffc199;
    --color-primitive-orange-300: #ffa66d;
    --color-primitive-orange-400: #ff8d44;
    --color-primitive-orange-500: #ff7628;
    --color-primitive-orange-600: #fb5b01;
    --color-primitive-orange-700: #e25100;
    --color-primitive-orange-800: #c74700;
    --color-primitive-orange-900: #ac3e00;
    --color-primitive-orange-1000: #8b3200;
    --color-primitive-orange-1100: #6d2700;
    --color-primitive-orange-1200: #541e00;
    --color-primitive-red-50: #fdeeee;
    --color-primitive-red-100: #ffdada;
    --color-primitive-red-200: #fbb;
    --color-primitive-red-300: #ff9696;
    --color-primitive-red-400: #ff7171;
    --color-primitive-red-500: #ff5454;
    --color-primitive-red-600: #fe3939;
    --color-primitive-red-700: #fa0000;
    --color-primitive-red-800: #ec0000;
    --color-primitive-red-900: #ce0000;
    --color-primitive-red-1000: #a90000;
    --color-primitive-red-1100: #850000;
    --color-primitive-red-1200: #620000;
    --color-primitive-magenta-50: #f3e5f4;
    --color-primitive-magenta-100: #ffd0ff;
    --color-primitive-magenta-200: #ffaeff;
    --color-primitive-magenta-300: #ff8eff;
    --color-primitive-magenta-400: #f661f6;
    --color-primitive-magenta-500: #f137f1;
    --color-primitive-magenta-600: #db00db;
    --color-primitive-magenta-700: #c000c0;
    --color-primitive-magenta-800: #a0a;
    --color-primitive-magenta-900: #8b008b;
    --color-primitive-magenta-1000: #6c006c;
    --color-primitive-magenta-1100: #500050;
    --color-primitive-magenta-1200: #3b003b;
    --color-primitive-purple-50: #f1eafa;
    --color-primitive-purple-100: #ecddff;
    --color-primitive-purple-200: #ddc2ff;
    --color-primitive-purple-300: #cda6ff;
    --color-primitive-purple-400: #bb87ff;
    --color-primitive-purple-500: #a565f8;
    --color-primitive-purple-600: #8843e1;
    --color-primitive-purple-700: #6f23d0;
    --color-primitive-purple-800: #5c10be;
    --color-primitive-purple-900: #5109ad;
    --color-primitive-purple-1000: #41048e;
    --color-primitive-purple-1100: #30016c;
    --color-primitive-purple-1200: #21004b;
    --color-neutral-white: #fff;
    --color-neutral-black: #000;
    --color-neutral-solid-gray-50: #f2f2f2;
    --color-neutral-solid-gray-100: #e6e6e6;
    --color-neutral-solid-gray-200: #ccc;
    --color-neutral-solid-gray-300: #b3b3b3;
    --color-neutral-solid-gray-400: #999;
    --color-neutral-solid-gray-420: #949494;
    --color-neutral-solid-gray-500: #7f7f7f;
    --color-neutral-solid-gray-536: #767676;
    --color-neutral-solid-gray-600: #666;
    --color-neutral-solid-gray-700: #4d4d4d;
    --color-neutral-solid-gray-800: #333;
    --color-neutral-solid-gray-900: #1a1a1a;
    --color-neutral-opacity-gray-50: rgba(0, 0, 0, 0.05);
    --color-neutral-opacity-gray-100: rgba(0, 0, 0, 0.1);
    --color-neutral-opacity-gray-200: rgba(0, 0, 0, 0.2);
    --color-neutral-opacity-gray-300: rgba(0, 0, 0, 0.3);
    --color-neutral-opacity-gray-400: rgba(0, 0, 0, 0.4);
    --color-neutral-opacity-gray-420: rgba(0, 0, 0, 0.42);
    --color-neutral-opacity-gray-500: rgba(0, 0, 0, 0.5);
    --color-neutral-opacity-gray-536: rgba(0, 0, 0, 0.54);
    --color-neutral-opacity-gray-600: rgba(0, 0, 0, 0.6);
    --color-neutral-opacity-gray-700: rgba(0, 0, 0, 0.7);
    --color-neutral-opacity-gray-800: rgba(0, 0, 0, 0.8);
    --color-neutral-opacity-gray-900: rgba(0, 0, 0, 0.9);
    --elevation-1:
      0 2px 8px 1px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.3);
    --elevation-2:
      0 2px 12px 2px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
    --elevation-3:
      0 4px 16px 3px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
    --elevation-4:
      0 6px 20px 4px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
    --elevation-5:
      0 8px 24px 5px rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    --elevation-6:
      0 10px 30px 6px rgba(0, 0, 0, 0.1), 0 3px 12px 0 rgba(0, 0, 0, 0.3);
    --elevation-7:
      0 12px 36px 7px rgba(0, 0, 0, 0.1), 0 3px 14px 0 rgba(0, 0, 0, 0.3);
    --elevation-8:
      0 14px 40px 7px rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.3);
    --color-semantic-success-2: var(--color-primitive-green-800);
    --color-semantic-error-1: var(--color-primitive-red-800);
    --color-semantic-error-2: var(--color-primitive-red-900);
    --color-semantic-warning-yellow-2: var(--color-primitive-yellow-900);
    --font-weight-400: 400;
    --font-weight-700: 700;
    --font-family-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: "Noto Sans Mono", monospace;
    --major-breakpoint: 1024px;
    --outside-gutter: 64px;
    --content-max-width: 1312px;
  }
  @media (width < 1024px) {
    :root {
      --outside-gutter: 32px;
      --content-max-width: 960px;
    }
  }
  @media (width < 768px) {
    :root {
      --outside-gutter: 16px;
    }
  }
  /*! kiso.css v1.2.2 | MIT License | https://github.com/tak-dcxi/kiso.css */
  /* ======================================================
  //  MARK: Universal
  // ====================================================== */
  *,
  ::before,
  ::after {
    /*
    * Includes `padding` and `border` in the element's specified dimensions.
    * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
    */
    box-sizing: border-box;
  }
  /* ======================================================
  //  MARK: Document and Body Elements
  // ====================================================== */
  :where(:root) {
    /* In Safari, if `font-family` is not specified, a serif font is applied by default, so `sans-serif` is set as the default here. */
    font-family: sans-serif;
    /* Prevents misreading by applying strict line-breaking rules. */
    line-break: strict;
    /*
    * For accessibility, it is recommended to set the `line-height` to at least 1.5 times the text size within paragraphs.
    * @see https://waic.jp/translations/WCAG21/#visual-presentation
    */
    line-height: 1.5;
    /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */
    overflow-wrap: anywhere;
    /* Prevents layout shift caused by the appearance or disappearance of the scrollbar. */
    scrollbar-gutter: stable;
    /* Suppresses the tap highlight on iOS. */
    -webkit-tap-highlight-color: transparent;
    /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
    text-autospace: normal;
    /*
    * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small.
    * This controls the auto-adjustment feature to prevent unwanted resizing.
    */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
    text-spacing-trim: trim-start;
  }
  :where(body) {
    /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
    margin: unset;
    /*
    * When creating a sticky footer, a minimum height is often required.
    * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer.
    */
    min-block-size: 100dvb;
  }
  /* ======================================================
  // MARK: Sections
  // ------------------------------------------------------ */
  :where(h1, h2, h3, h4, h5, h6) {
    /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
    text-wrap: pretty;
  }
  :where(h1) {
    font-size: 2em;
    /*
    * Adjusts user agent (UA) styles for `h1` elements within sectioning content.
    * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties.
    * @see https://html.spec.whatwg.org/#sections-and-headings
    */
    margin-block: 0.67em;
  }
  :where(h2, h3, h4, h5, h6) {
    /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    margin-block: unset;
  }
  :where(search) {
    /*
    * The `<search>` element is supported from Safari 17.
    * This prevents it from being displayed as an inline element in unsupported environments.
    */
    display: block flow;
  }
  /* ======================================================
  //  MARK: Grouping content
  // ====================================================== */
  :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
    /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    margin-block: unset;
  }
  :where(blockquote, figure) {
    /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    margin-inline: unset;
  }
  :where(p:lang(en)) {
    /*
    * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read.
    * Therefore, when lang="en", this prevents the last line from ending with a single word.
    */
    text-wrap: pretty;
  }
  :where(address:lang(ja)) {
    /* Italic style is not common in Japanese, so the `font-style` is reset. */
    font-style: unset;
  }
  :where(ul, ol, menu) {
    /*
    * In Safari, using `list-style: none` prevents screen readers from announcing lists.
    * `list-style-type: ""` is used to hide markers without affecting accessibility.
    * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
    */
    list-style-type: "";
    /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    padding-inline-start: unset;
  }
  :where(dt) {
    /* It is common to display `<dt>` elements in bold, so `font-weight: bolder;` is set by default. */
    font-weight: bolder;
  }
  :where(dd) {
    /* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    margin-inline-start: unset;
  }
  :where(pre) {
    /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
    text-autospace: no-autospace;
    /*
    * Since `text-spacing-trim` can affect spacing in `<pre>` elements even with its initial value, the final rendering may depend on the user's font settings.
    * To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
    */
    text-spacing-trim: space-all;
  }
  /* ======================================================
  //  MARK: Text-level semantics
  // ====================================================== */
  :where(em:lang(ja)) {
    /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
    font-weight: bolder;
  }
  :where(:is(i, cite, em, dfn, var):lang(ja)) {
    /* Italic style is not common in Japanese, so the `font-style` is reset. */
    font-style: unset;
  }
  :where(code, kbd, samp) {
    /*
    * Set a monospace font family referencing Tailwind.
    * @see https://tailwindcss.com/docs/font-family
    */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
    font-feature-settings: initial;
    /* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
    font-size: unset;
    /*
    * Disables font ligatures for programming fonts (like Fira Code)
    * to prevent character combinations like `=>` from being rendered as a single symbol (e.g., `⇒`).
    */
    font-variant-ligatures: none;
    font-variation-settings: initial;
  }
  :where(abbr[title]) {
    cursor: help;
    /*
    * The `<abbr>` element with the `title` attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
    * This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
    * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
    */
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }
  :where(time) {
    /* Set to `no-autospace` because date notations in typography do not include spaces. */
    text-autospace: no-autospace;
  }
  @media (forced-colors: active) {
    :where(mark) {
      /*
      * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
      * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
      */
      background-color: Highlight;
      color: HighlightText;
    }
  }
  @media print {
    :where(mark) {
      border-style: dotted;
      /*
      * Not all printers support color, and users might print in grayscale.
      * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
      * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
      */
      border-width: 1px;
    }
  }
  /* ======================================================
  //  MARK: Links
  // ====================================================== */
  :where(a:any-link) {
    /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
    color: unset;
    /*
    * While link underlines can be useful, they are often obstructive.
    * They are disabled by default.
    * If needed, restore them using `text-decoration-line: revert;`.
    */
    text-decoration-line: unset;
    /* Set the underline thickness to the font's default thickness. */
    text-decoration-thickness: from-font;
  }
  /* ======================================================
  //  MARK: Embedded content
  // ====================================================== */
  :where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
    /* Automatically adjust block size based on content. */
    block-size: auto;
    /* Prevents overflow by setting the maximum width to `100%`. */
    max-inline-size: 100%;
    /* Prevents extra space from appearing at the bottom of the element. */
    vertical-align: bottom;
  }
  :where(iframe) {
    /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
    border: unset;
  }
  /* ======================================================
  //  MARK: Tabular data
  // ====================================================== */
  :where(table) {
    /* Collapse borders for a more refined table design. */
    border-collapse: collapse;
  }
  :where(caption, th) {
    /* The `text-align` specified in the UA stylesheet is often unnecessary, so it is reset. */
    text-align: unset;
  }
  :where(caption) {
    /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
    text-wrap: pretty;
  }
  /* ======================================================
  //  MARK: Forms
  // ====================================================== */
  :where(button, input, select, textarea),
  ::file-selector-button {
    /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
    border-color: unset;
    border-radius: unset;
    border-style: solid;
    /*
    * These elements are often styled with a border, so a `1px` border is applied by default for consistency.
    * This ensures readability even for unstyled elements.
    * When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
    */
    border-width: 1px;
    color: unset;
    font: unset;
    letter-spacing: unset;
    text-align: unset;
  }
  :where(input:is([type=radio i], [type=checkbox i])) {
    /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
    margin: unset;
  }
  :where(input[type=file i]) {
    /* The `border` is often unnecessary, so it is reset here. */
    border: unset;
  }
  :where(input[type=search i]) {
    /* Remove the rounded corners of search inputs on macOS and normalize the background color. */
    -webkit-appearance: textfield;
  }
  @supports (-webkit-touch-callout: none) {
    :where(input[type=search i]) {
      /* normalize the background color on iOS. */
      background-color: Canvas;
    }
  }
  :where(input:is([type=tel i],
  [type=url i],
  [type=email i],
  [type=number i]):not(:placeholder-shown)) {
    /*
    * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
    * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
    * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
    */
    direction: ltr;
  }
  :where(textarea) {
    /* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
    margin-block: unset;
    /* Allows vertical resizing for `<textarea>` elements. */
    resize: block;
  }
  :where(input:not([type=button i], [type=submit i], [type=reset i]),
  textarea,
  [contenteditable]) {
    /* Set to `no-autospace` because `text-autospace` can insert spaces during input, potentially causing erratic behavior. */
    text-autospace: no-autospace;
  }
  :where(button,
  input:is([type=button i], [type=submit i], [type=reset i])),
  ::file-selector-button {
    /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
    background-color: unset;
  }
  :where(button,
  input:is([type=button i], [type=submit i], [type=reset i]),
  [role=tab i],
  [role=button i],
  [role=option i]),
  ::file-selector-button {
    /*
    * On iOS, double-tapping a button can cause zooming, which harms usability.
    * `touch-action: manipulation` is specified to disable zooming on double-tap.
    * Third-party plugins such as Swiper sometimes use div elements with these roles as buttons, since double-tapping a div can still trigger zooming, it's advisable to specify this property.
    */
    touch-action: manipulation;
  }
  :where(button:enabled,
  label[for],
  select:enabled,
  input:is([type=button i],
  [type=submit i],
  [type=reset i],
  [type=radio i],
  [type=checkbox i]):enabled,
  [role=tab i],
  [role=button i],
  [role=option i]),
  :where(:enabled)::file-selector-button {
    /* Indicate clickable elements with a pointer cursor. */
    cursor: pointer;
  }
  :where(fieldset) {
    border: unset;
    /* The following default styles are often unnecessary, so they are reset. */
    margin-inline: unset;
    /*
    * Prevent fieldset from causing overflow.
    * Reset the default `min-inline-size: min-content` to prevent children from stretching fieldset.
    * @see https://github.com/twbs/bootstrap/issues/12359
    */
    min-inline-size: 0;
    padding: unset;
  }
  :where(legend) {
    /* The default `padding-inline` is often unnecessary, so it is reset. */
    padding-inline: unset;
  }
  :where(progress) {
    /* Resets the vertical alignment of the `<progress>` element to its initial value. */
    vertical-align: unset;
  }
  ::placeholder {
    /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
    opacity: unset;
  }
  /* ======================================================
  //  MARK: Interactive elements
  // ====================================================== */
  :where(summary) {
    /* Changing the cursor to a pointer clarifies the clickability of the element. */
    cursor: pointer;
    /* The default triangle marker is often unnecessary, so it is disabled. */
    list-style-type: "";
  }
  :where(summary)::-webkit-details-marker {
    /* In Safari versions earlier than 18.4 (released in April 2025), a triangle icon is displayed using the -webkit-details-marker CSS pseudo-element, so it should be removed. */
    display: none;
  }
  :where(dialog, [popover]) {
    border: unset;
    /*
    * When these fixed-position elements are scrolled, preventing scroll chaining on the underlying page and bounce effects on mobile improves usability.
    * Disabling block-direction scroll chaining is recommended.
    */
    overscroll-behavior-block: contain;
    /* The following default styles are often unnecessary, so they are reset. */
    padding: unset;
  }
  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    /*
    * These elements can be easily displayed by explicitly setting their `display` property.
    * To prevent them from appearing when not in an open state, they are forcibly hidden.
    */
    display: none !important;
  }
  :where(dialog) {
    max-block-size: unset;
    /*
    * The max width and height of a `<dialog>` element are typically determined by the design.
    * These UA stylesheet properties are reset as they can be obstructive, especially when trying to make the dialog full-screen.
    */
    max-inline-size: unset;
  }
  :where(dialog)::backdrop {
    /* Normalize the background color of the `::backdrop` element. */
    background-color: oklch(0% 0 0deg / 0.3);
  }
  :where([popover]) {
    /*
    * While the UA stylesheet's `margin` for `<dialog>` elements is useful for centering with `inset: 0`,
    * but `margin` for `popover` elements is often obstructive as they frequently use Anchor Positioning.
    */
    margin: unset;
  }
  /* ======================================================
  //  MARK: Focus Styles
  // ====================================================== */
  :where(:focus-visible) {
    /* Add space between the content and the focus outline. */
    outline-offset: 3px;
  }
  [tabindex="-1"]:focus {
    /* Prevent programmatically focused elements from displaying an outline unless they are naturally focusable. */
    outline: none !important;
  }
  /* ======================================================
  //  MARK: Misc
  // ====================================================== */
  :where(:disabled, [aria-disabled=true i]) {
    /* Display the default cursor on disabled elements to reflect their non-interactive state. */
    cursor: default;
  }
  [hidden]:not([hidden=until-found i]) {
    /* Ensure that elements intended to be hidden are not displayed, improving clarity and layout control. */
    display: none !important;
  }
  *::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
  html,
  body {
    min-width: 360px;
    overflow-x: auto;
  }
  html {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
  }
  html:has(dialog[open]) {
    scrollbar-gutter: stable;
  }
  html:has(.l-header__menuButton > button[aria-expanded=true]) {
    overflow: hidden;
  }
  body {
    color: var(--color-neutral-solid-gray-900);
    font-family: var(--font-family-sans);
    font-size: 1.0625rem;
    height: 100%;
    line-height: 1.7;
    overflow-x: clip;
  }
  body,p,
  ul,
  ol,
  li,
  dl,
  dt,
  dd {
    margin: 0;
    padding: 0;
  }
  em {
    font-style: normal;
    font-weight: var(--font-weight-700);
  }
  sub,
  sup {
    font-size: 75%;
  }
  a :where(img) {
    pointer-events: none;
  }
  img,
  svg {
    height: auto;
    max-width: 100%;
    width: auto;
  }
  ::placeholder {
    opacity: 1;
  }
  label {
    cursor: pointer;
  }
  [type=text],
  [type=date],
  [type=datetime-local],
  [type=email],
  [type=month],
  [type=number],
  [type=password],
  [type=search],
  [type=tel],
  [type=time],
  [type=url],
  [type=week],
  select {
    line-height: 1;
  }
  [type=text],
  [type=date],
  [type=datetime-local],
  [type=email],
  [type=month],
  [type=number],
  [type=password],
  [type=search],
  [type=tel],
  [type=time],
  [type=url],
  [type=week],
  select,
  textarea {
    appearance: none;
    border-radius: 0;
    color: currentColor;
    font-size: 1rem;
  }
  [type=date]::-webkit-inner-spin-button,
  [type=date]::-webkit-clear-button {
    appearance: none;
  }
  [type=date]::-webkit-calendar-picker-indicator {
    height: 100%;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  button {
    font-family: var(--font-family-sans);
    line-height: 1.7;
  }
  textarea {
    overflow-x: hidden;
    overflow-y: auto;
    resize: vertical;
  }
  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  [hidden=hidden] {
    display: none !important;
  }
}
@layer layout {
  .l-content {
    grid-area: content;
    min-width: 0;
  }
  .l-content[data-page=guest-top] {
    background-color: var(--color-primitive-green-50);
  }
  .l-content__outer {
    padding: 3rem var(--outside-gutter) 5rem;
  }
  .l-content__outer:has(+ .l-page-top) {
    padding-bottom: 2.5rem;
  }
  .l-content__outer--rounded-top {
    background-color: var(--color-neutral-white);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding-top: 4.5rem;
  }
  .l-content__inner {
    margin-inline: auto;
    max-width: var(--content-max-width);
    width: 100%;
  }
  .l-content__inner > :first-child {
    margin-top: 0;
  }
  .l-content__inner > :last-child {
    margin-bottom: 0;
  }
  .l-page-top {
    bottom: 2.5rem;
    display: flex;
    grid-area: page-top;
    margin-bottom: 2.5rem;
    padding: 0 2rem;
    position: sticky;
  }
  .l-page-top__link {
    align-items: center;
    background-color: var(--color-neutral-white);
    border: 1px solid var(--color-primitive-green-900);
    border-radius: 2.125rem;
    color: var(--color-primitive-green-900);
    display: flex;
    height: 3.5rem;
    justify-content: center;
    margin-left: auto;
    width: 3.5rem;
  }
  @media (hover: hover) {
    .l-page-top__link:hover {
      background-color: var(--color-primitive-green-50);
    }
  }
  .l-page-top__link:focus-visible {
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-page-top__icon {
    align-items: center;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    padding: 0.28125rem;
    width: 1.5rem;
  }
  @media (width < 1024px) {
    .l-content__outer {
      padding: 2.5rem var(--outside-gutter) 4rem;
    }
    .l-content__outer:has(+ .l-page-top) {
      padding-bottom: 2rem;
    }
    .l-content__outer--rounded-top {
      border-top-left-radius: 1.5rem;
      border-top-right-radius: 1.5rem;
      padding-top: 3.5rem;
    }
    .l-page-top {
      bottom: 2rem;
      margin-bottom: 2rem;
      padding: 0 1rem;
    }
  }
  .l-footer {
    --header-container-max-width: 1360px;
    --footer-border-height: calc(6 / 16 * 1rem);
    border-top: 1px solid var(--color-neutral-solid-gray-420);
    grid-area: footer;
    padding: 2.5rem var(--outside-gutter);
    position: relative;
  }
  .l-footer::before, .l-footer::after {
    bottom: 0;
    content: "";
    height: var(--footer-border-height);
    position: absolute;
    width: 50%;
  }
  .l-footer::before {
    background: var(--color-primitive-blue-500);
    left: 0;
  }
  .l-footer::after {
    background: var(--color-primitive-green-500);
    right: 0;
  }
  .l-footer__inner {
    margin-inline: auto;
    max-width: var(--content-max-width);
    width: 100%;
  }
  .l-footer__logo {
    font-size: 1.25rem;
    font-weight: var(--font-weight-700);
    letter-spacing: 0.02em;
    line-height: 1.6;
  }
  .l-footer__navigation {
    display: grid;
    gap: 4.5rem;
    margin-top: 2.5rem;
  }
  .l-footer[data-state=guest] .l-footer__navigation {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-footer[data-state=logged-in] .l-footer__navigation {
    grid-template-columns: repeat(4, 1fr);
  }
  .l-footer__navigationText {
    align-items: start;
    display: flex;
    font-size: 1rem;
    font-weight: var(--font-weight-700);
    gap: 0.5rem;
    line-height: 1.2;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
  }
  .l-footer__navigationText:before {
    background-color: currentColor;
    content: "";
    display: block;
    flex: none;
    height: 1.5rem;
    mask-image: var(--icon-image);
    mask-repeat: no-repeat;
    mask-size: cover;
    transform: translateY(-2px);
    width: 1.5rem;
  }
  .l-footer__childNavigation {
    margin-top: 0.5rem;
  }
  .l-footer__childNavigationLink {
    align-items: center;
    display: flex;
    font-size: 1rem;
    gap: 0.5rem;
    line-height: 1.3;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
  }
  .l-footer__childNavigationLink:after {
    background-color: currentColor;
    content: "";
    display: block;
    flex: none;
    height: 1rem;
    margin: 0.125rem 0 0 auto;
    mask-image: url(../../../images/design/icon/arrow_right.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    width: 1rem;
  }
  @media (hover: hover) {
    .l-footer__childNavigationLink:hover {
      text-decoration-line: underline;
      text-decoration-skip-ink: auto;
      text-decoration-style: solid;
      text-decoration-thickness: 20%;
      text-underline-offset: auto;
      text-underline-position: from-font;
    }
  }
  .l-footer__childNavigationLink:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-footer__meta {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
    margin-top: 2.5rem;
  }
  .l-footer__utility {
    display: flex;
    gap: 1rem;
  }
  .l-footer__utilityLink {
    font-size: 1rem;
    line-height: 1.3;
    text-decoration-line: underline;
    text-decoration-skip-ink: auto;
    text-decoration-style: solid;
    text-decoration-thickness: 6.25%;
    text-underline-offset: 20%;
    text-underline-position: from-font;
  }
  @media (hover: hover) {
    .l-footer__utilityLink:hover {
      text-decoration-thickness: 20%;
    }
  }
  .l-footer__utilityLink:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
    text-decoration: none;
  }
  .l-footer__copyright {
    font-size: 0.875rem;
    line-height: 1.2;
  }
  .l-footer__copyright > small {
    font-size: unset;
  }
  @media (width < 1024px) {
    .l-footer {
      padding: 2rem var(--outside-gutter);
    }
    .l-footer__logo {
      font-size: 1.125rem;
      text-align: center;
    }
    .l-footer__navigation {
      gap: 1.5rem;
    }
    .l-footer[data-state=guest] .l-footer__navigation, .l-footer[data-state=logged-in] .l-footer__navigation {
      grid-template-columns: 1fr;
    }
    .l-footer__navigationText,.l-footer__childNavigationLink {
      padding-left: 0;
    }
    .l-footer__meta {
      flex-direction: column;
      gap: 1.5rem;
    }
    .l-footer__utility {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 0.75rem;
    }
    .l-footer__copyright {
      text-align: center;
    }
  }
  .l-footer[data-state=logged-in] [data-state=guest],.l-footer[data-state=guest] [data-state=logged-in] {
    display: none;
  }
  .l-header {
    --header-container-max-width: 1360px;
    --header-border-height: calc(6 / 16 * 1rem);
    border-bottom: 0.0625rem solid var(--color-neutral-solid-gray-420);
    grid-area: header;
    padding: calc(var(--header-border-height) + 0.5rem) 2.5rem 0;
    position: relative;
    z-index: 10;
  }
  .l-header::before, .l-header::after {
    content: "";
    height: var(--header-border-height);
    position: absolute;
    top: 0;
    width: 50%;
  }
  .l-header::before {
    background: var(--color-primitive-blue-500);
    left: 0;
  }
  .l-header::after {
    background: var(--color-primitive-green-500);
    right: 0;
  }
  .l-header__inner {
    align-items: center;
    display: flex;
    gap: clamp(1.5rem, -0.962rem + 3.85vw, 2.5rem);
    height: 100%;
    margin-inline: auto;
    max-width: var(--header-container-max-width);
    width: 100%;
  }
  .l-header__logo {
    color: var(--color-neutral-solid-gray-900);
    font-weight: var(--font-weight-700);
  }
  .l-header__logoName {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
  }
  .l-header__logoTitle {
    display: block;
    font-size: 2rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
  }
  .l-header__dropdown {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .l-header__menuButton {
    display: none;
  }
  .l-header__content {
    width: 100%;
  }
  .l-header__contentInner {
    display: flex;
    flex-direction: column-reverse;
  }
  .l-header__login {
    margin-left: auto;
  }
  .l-header__login .c-button {
    margin-top: 0;
  }
  .l-header__navigation {
    margin-right: -2.5rem;
  }
  .l-header__navigationList {
    display: flex;
  }
  .l-header__navigationItem:has(.l-header__childNavigationList) {
    position: relative;
  }
  .l-header__navigationLink {
    display: block;
    position: relative;
    text-underline-offset: 0.1875rem;
  }
  .l-header__navigationLink::after {
    background-color: transparent;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
  }
  @media (hover: hover) {
    .l-header__navigationLink:not(span):hover {
      background-color: var(--color-neutral-solid-gray-50);
    }
    .l-header__navigationLink:not(span):hover::after {
      background-color: var(--color-neutral-black);
    }
  }
  .l-header__navigationLink:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-header__navigationLink:focus-visible::after {
    display: none;
  }
  .l-header__navigationLink[data-dropdown-toggle] {
    border: none;
    padding: 0;
  }
  .l-header__navigationLinkText {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-weight: var(--font-weight-700);
    gap: 0.25rem;
    line-height: 1.3;
    min-height: 4rem;
    padding: 0.25rem 1rem;
  }
  .l-header__navigationLinkText::before, .l-header__navigationLinkText::after {
    background-color: currentColor;
    content: "";
    display: block;
    mask-repeat: no-repeat;
    mask-size: cover;
  }
  .l-header__navigationLinkText::before {
    height: 1.5rem;
    mask-image: var(--icon-image);
    width: 1.5rem;
  }
  .l-header__navigationLinkText::after {
    display: none;
    height: 1rem;
    width: 1rem;
  }
  .l-header__navigationLink:is(span) .l-header__navigationLinkText::after {
    display: none;
  }
  .l-header__navigationLink[data-dropdown-toggle] .l-header__navigationLinkText::after {
    display: block;
    margin-top: 0.25rem;
    mask-image: url(../../../images/design/icon/arrow_down.svg);
  }
  .l-header__navigationLink[aria-expanded=true] .l-header__navigationLinkText::after {
    transform: rotate(180deg);
  }
  .l-header__childNavigationList {
    background: var(--color-neutral-white);
    border: 1px solid var(--color-neutral-solid-gray-420);
    display: none;
    left: 0;
    min-width: 15rem;
    padding: 1.5rem 0;
    position: absolute;
    top: calc(100% + 1px);
  }
  .l-header__childNavigationList[aria-hidden=false] {
    display: block;
  }
  @media (scripting: none) {
    .l-header__childNavigationList {
      display: block;
      position: relative;
      top: auto;
    }
  }
  .l-header__childNavigationLink {
    color: var(--color-neutral-solid-gray-800);
    display: block;
    font-size: 1rem;
    line-height: 1.3;
    padding: 0.625rem 1rem;
  }
  @media (hover: hover) {
    .l-header__childNavigationLink:hover {
      background-color: var(--color-neutral-solid-gray-50);
    }
  }
  .l-header__childNavigationLink:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-header__userMenu {
    margin-left: auto;
    position: relative;
  }
  .l-header__userMenuButton {
    align-items: center;
    border: none;
    display: flex;
    justify-content: center;
    padding: 0.75rem 0.5rem 0.5rem;
  }
  @media (hover: hover) {
    .l-header__userMenuButton:hover {
      background-color: var(--color-neutral-solid-gray-50);
    }
  }
  .l-header__userMenuButton:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-header__userMenuButton[aria-expanded=true]:after {
    transform: rotate(180deg);
  }
  @media (scripting: none) {
    .l-header__userMenuButton {
      display: none;
    }
  }
  .l-header__userMenuButton::before, .l-header__userMenuButton::after {
    background-color: currentColor;
    content: "";
    display: block;
    flex: none;
    mask-repeat: no-repeat;
    mask-size: cover;
  }
  .l-header__userMenuButton::before {
    height: 2rem;
    margin-right: 8px;
    mask-image: url(../../../images/design/icon/user.svg);
    width: 2rem;
  }
  .l-header__userMenuButton::after {
    height: 1.5rem;
    mask-image: url(../../../images/design/icon/arrow_down.svg);
    width: 1.5rem;
  }
  .l-header__userLabel {
    display: flex;
    flex-direction: column;
    margin-right: 12px;
  }
  .l-header__companyName {
    color: var(--color-neutral-solid-gray-600);
    font-size: 0.875rem;
    line-height: 1.2;
  }
  .l-header__userName {
    font-size: 1rem;
    font-weight: var(--font-weight-700);
    line-height: 1.3;
    margin-top: 0.25rem;
  }
  .l-header__userName > span {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: var(--font-weight-400);
    line-height: 1.2;
    margin-left: 4px;
  }
  .l-header__userAccount {
    display: none;
  }
  .l-header__userMenuButton[aria-expanded=true] + .l-header__userAccount {
    background: var(--color-neutral-white);
    border: 1px solid var(--color-neutral-solid-gray-420);
    box-shadow: var(--elevation-1);
    display: block;
    max-width: 50vw;
    min-width: 17.5rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 100%;
    width: max-content;
    z-index: 1;
  }
  @media (scripting: none) {
    .l-header__userAccount {
      display: block;
      position: relative;
      top: auto;
    }
  }
  .l-header__userAccountLink {
    align-items: center;
    color: var(--color-neutral-solid-gray-800);
    display: flex;
    font-size: 1rem;
    gap: 0.5rem;
    justify-content: space-between;
    line-height: 1.3;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
  }
  @media (hover: hover) {
    .l-header__userAccountLink:hover {
      background-color: var(--color-neutral-solid-gray-50);
    }
  }
  .l-header__userAccountLink:focus-visible {
    background-color: var(--color-primitive-yellow-300);
    border-radius: 2px;
    box-shadow: 0 0 0 0.125rem var(--color-primitive-yellow-300);
    outline: 0.25rem solid var(--color-neutral-black);
    outline-offset: 0.125rem;
  }
  .l-header__userAccountLink::after {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 1rem;
    mask-image: url(../../../images/design/icon/arrow_right.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    width: 1rem;
  }
  .l-header__userAccountButton {
    margin-top: 1.5rem;
  }
  .l-header__userAccountButton .c-button {
    margin-top: 0;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    width: 100%;
  }
  @media (width >= 1024px) {
    .l-header__navigationLink[aria-current=true] {
      color: var(--color-primitive-green-900);
    }
    .l-header__navigationLink[aria-current=true]::after {
      background-color: var(--color-primitive-green-900);
      height: 4px;
    }
  }
  @media (width >= 1024px) and (hover: hover) {
    .l-header__navigationLink[aria-current=true]:hover {
      text-decoration: underline;
    }
  }
  @media (width < 1100px) {
    .l-header__childNavigationList {
      min-width: calc(100% + 1rem);
    }
  }
  @media (width < 1024px) {
    .l-header {
      padding: calc(var(--header-border-height) + 0.9375rem) 1rem 0.9375rem;
    }
    .l-header__inner {
      gap: 0;
      justify-content: space-between;
    }
  }
  @media (width < 1024px) and (scripting: none) {
    .l-header__inner {
      display: block;
      height: auto;
    }
  }
  @media (width < 1024px) {
    .l-header__logoName {
      font-size: 0.875rem;
    }
    .l-header__logoTitle {
      font-size: 1.5rem;
      letter-spacing: 0.02em;
    }
    .l-header__dropdown {
      align-items: center;
      display: flex;
      justify-content: flex-end;
    }
    .l-header__menuButton {
      display: block;
    }
  }
  @media (width < 1024px) and (scripting: none) {
    .l-header__menuButton {
      display: none;
    }
  }
  @media (width < 1024px) {
    .l-header__menuButton .c-hamburger-menu-icon-button__icon--close,.l-header__menuButton .c-hamburger-menu-icon-button[aria-expanded=true] .c-hamburger-menu-icon-button__icon--open {
      display: none;
    }
    .l-header__menuButton .c-hamburger-menu-icon-button[aria-expanded=true] .c-hamburger-menu-icon-button__icon--close {
      display: block;
    }
    .l-header__content {
      background-color: var(--color-neutral-white);
      border-top: 0.0625rem solid var(--color-neutral-solid-gray-420);
      display: none;
      height: calc(100dvh - var(--header-height));
      left: 0;
      position: absolute;
      top: 100%;
    }
    .l-header__content[aria-hidden=false] {
      display: block;
    }
  }
  @media (width < 1024px) and (scripting: none) {
    .l-header__content {
      display: block;
      position: relative;
      top: auto;
    }
  }
  @media (width < 1024px) {
    .l-header__contentInner {
      flex-direction: column;
      max-height: calc(100dvh - var(--header-height));
      overflow-y: auto;
      padding: 1rem;
    }
    .l-header__navigation {
      border-bottom: 0.0625rem solid var(--color-neutral-solid-gray-420);
      margin: 0 0 1.0625rem;
      padding-bottom: 1rem;
    }
    .l-header__navigationList {
      flex-direction: column;
    }
    .l-header__navigationLink {
      width: 100%;
    }
    .l-header__navigationLink::after {
      display: none;
    }
    .l-header__navigationLinkText {
      gap: 0.5rem;
      min-height: 2.75rem;
      padding: 0;
    }
    .l-header__navigationLinkText::after {
      display: block;
      margin-left: auto;
      mask-image: url(../../../images/design/icon/arrow_right.svg);
    }
    .l-header__navigationLink[data-dropdown-toggle] .l-header__navigationLinkText::after {
      display: none;
    }
    .l-header__login {
      margin-left: 0;
    }
    .l-header__login .c-button {
      margin-inline: auto;
      min-height: 3rem;
      min-width: min(100%, 19.4375rem);
      padding: 0.75rem 1rem;
    }
    .l-header__childNavigationList {
      border: none;
      display: block;
      min-width: 0;
      padding: 0;
      padding-left: 1rem;
      position: relative;
    }
    .l-header__childNavigationLink {
      align-items: center;
      display: flex;
      gap: 0.5rem;
      min-height: 2.75rem;
      padding: 0;
    }
    .l-header__childNavigationLink::after {
      background-color: currentColor;
      content: "";
      display: inline-block;
      height: 1rem;
      margin-left: auto;
      mask-image: url(../../../images/design/icon/arrow_right.svg);
      width: 1rem;
    }
    .l-header__userMenu {
      margin-left: 0;
    }
    .l-header__userMenuButton {
      display: none;
    }
    .l-header__userAccount {
      display: block;
    }
    .l-header__userLabel {
      margin-right: 0;
      padding-left: 3.25rem;
    }
    .l-header__userLabel::before {
      background-color: currentColor;
      content: "";
      display: block;
      height: 2.75rem;
      left: 0;
      mask-image: url(../../../images/design/icon/user.svg);
      mask-repeat: no-repeat;
      mask-size: cover;
      position: absolute;
      top: 0;
      width: 2.75rem;
    }
    .l-header__userAccountLink {
      margin: 0.75rem 0 0 2.25rem;
      min-height: 2.75rem;
      padding: 0 0 0 1rem;
    }
    .l-header__userAccountButton .c-button {
      margin-inline: auto;
      max-width: 19.4375rem;
      min-height: 3rem;
      padding: 0.75rem 1rem;
    }
  }
  .l-header[data-state=logged-in] [data-state=guest],.l-header[data-state=guest] [data-state=logged-in] {
    display: none;
  }
  .l-wrap {
    display: grid;
    grid-template-areas: "header" "breadcrumb" "content" "footer";
    grid-template-rows: auto auto 1fr auto;
    min-height: 100%;
    width: 100%;
  }
}