@charset "UTF-8";
@layer settings, reset, elements, project, vendor, utilities;
@layer settings {
  /* :root */
  :where(:root) {
    /* px based number to rem */
    --to-rem: calc(tan(atan2(1px, 16px)) * 1rem);
    /* space unit */
    --space-unit: calc(15 * var(--to-rem));
    /* px based number to space unit */
    --to-space-unit: calc(var(--space-unit) / 15);
    /* container size */
    --main-container-width-max: calc(1210 * var(--to-rem));
    --side-container-width-max: calc(200 * var(--to-rem));
    --page-container-width-max: calc(var(--main-container-width-max) + var(--main-container-padding-inline) * 2 + var(--side-container-width-max));
    --main-container-padding-inline: var(--space-unit);
    --containter-padding-inline: calc(var(--space-unit) * 1);
    --containter-padding-block: calc(var(--space-unit) * .8);
    /* header size */
    --header-height--default: calc(60 * var(--to-rem));
    --header-height: var(--header-height--default);
    --line-height--default: 1.5;
    /* form */
    --form-parts-height--m: calc(40 * var(--to-space-unit));
    --form-parts-height--s: calc(32 * var(--to-space-unit));
    --radius--xl: 2rem;
    --radius--l: 1.25rem;
    --radius--m: 1rem;
    --radius--s: .5rem;
    --radius--xs: .3125rem;
    --radius--xxs: .1875rem;
    --font-size--xs: max(calc(12 * var(--to-space-unit)), 11px);
    --font-size--s: max(calc(14 * var(--to-space-unit)), 11px);
    --font-size--m: calc(16 * var(--to-space-unit));
    --font-size--l: calc(18 * var(--to-space-unit));
    --font-size--xl: calc(21 * var(--to-space-unit));
    --font-size--xxl: calc(32 * var(--to-space-unit));
    --font-size--xxxl: calc(40 * var(--to-space-unit));
    --font-weight--normal: 400;
    --font-weight--bold: 700;
    --leading-size: calc(1lh - 1em);
    --leading-size--half: calc(var(--leading-size) / 2);
    --z-index--header: 101;
    --z-index--header-nav: 1;
    --z-index--side-menu: 100;
  }
  :where(:root) :lang(en) {
    --leading-size: calc(1lh - 1cap);
  }
  :where(:root) {
    --transition-time: .3s;
    --font-family--default: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --color--text: #313131;
    --color--text-invert: #fff;
    --color--body: #fff;
    --color--checked: #009ae5;
    --color--success: var(--color--text);
    --color--success-bg: #b0e0e6;
    --color--success-border: #191970;
    --color--error: var(--color--theme-em);
    --color--error-bg: #ffc0cb;
    --color--error-border: var(--color--theme-em);
    --color--caution-bg: #ffd700;
    --color--caution-border: var(--color--text);
    --filter--white: invert(100%) sepia(4%) saturate(19%) hue-rotate(144deg) brightness(105%) contrast(100%);
    /* theme default */
    --color--theme-primary: #406484;
    --color--theme-bg: #fff;
    --color--theme-bg-main: #fff;
    --color--theme-bg-header: #284658;
    --color--theme-bg-side: #f1f5f9;
    --color--theme-title: var(--color--text-invert);
    --color--theme-bg-title: var(--color--theme-primary);
    --color--theme-user: var(--color--text-invert);
    --color--theme-bg-user: var(--color--theme-primary);
    --filter--theme-user-icon: var(--filter--white);
    --color--theme-logout: var(--color--theme-primary);
    --color--theme-bg-logout: #fff;
    --color--theme-paging: #0054a3;
    --color--theme-em: #c21d48;
    --color--theme-link: #009ae5;
    --color--theme-gray: #767676;
    --color--theme-line: #e5e5e5;
    --color--theme-form-border: #ababab;
    --color--theme-section-border: var(--color--theme-primary);
    --color--theme-bg-chat-zebra: #ecf2fc;
    --filter--theme-icon: invert(36%) sepia(17%) saturate(1082%) hue-rotate(167deg) brightness(98%) contrast(97%);
    --img--theme-bg-image-main: none;
    --text--theme-title: "出前授業どっとこむ マイページ";
    --deiplay--footer: none;
  }
  [data-theme=company] {
    /* theme company */
    --color--theme-primary: #009ae5;
    --color--theme-bg: #fff;
    --color--theme-bg-main: #fff;
    --color--theme-bg-header: #003d79;
    --color--theme-bg-side: #f1f4fa;
    --color--theme-bg-title: #009ae5;
    --color--theme-logout: #009ae5;
    --color--theme-paging: #0054a3;
    --color--theme-em: #c21d48;
    --color--theme-link: #009ae5;
    --color--theme-gray: #767676;
    --color--theme-line: #e5e5e5;
    --color--theme-section-border: #00bad8;
    --filter--theme-icon: invert(50%) sepia(38%) saturate(6981%) hue-rotate(174deg) brightness(99%) contrast(102%);
    --img--theme-bg-image-main: none;
    --text--theme-title: "出前授業どっとこむ マイページ";
  }
  [data-theme=school] {
    /* theme school */
    --color--theme-primary: #ffe070;
    --color--theme-bg: #fff;
    --color--theme-bg-main: #fff;
    --color--theme-bg-header: #ffe070;
    --color--theme-bg-side: #fff;
    --color--theme-logout: #3b4251;
    --color--theme-bg-logout: #f1f1f1;
    --color--theme-title: var(--color--text);
    --color--theme-bg-title: #787c86;
    --color--theme-user: var(--color--text);
    --color--theme-bg-user: transparent;
    --color--theme-paging: #767676;
    --color--theme-em: #e74a93;
    --color--theme-link: #c40082;
    --color--theme-gray: #767676;
    --color--theme-line: #eaeaea;
    --color--theme-section-border: #787c86;
    --filter--theme-icon: invert(23%) sepia(9%) saturate(1091%) hue-rotate(183deg) brightness(98%) contrast(91%);
    --filter--theme-user-icon: var(--filter--theme-icon);
    --img--theme-bg-image-main: none;
    --text--theme-title: "出前授業どっとこむ マイページ";
  }
}
@layer reset {
  /*! 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;
    /*
    * 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;
    /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
    text-spacing-trim: trim-start;
    /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
    text-autospace: normal;
    /* Prevents misreading by applying strict line-breaking rules. */
    line-break: strict;
    /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */
    overflow-wrap: anywhere;
    /*
    * 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%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    /* 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;
  }
  :where(body) {
    /*
    * 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;
    /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
    margin: unset;
  }
  /* ======================================================
  // 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) {
    /*
    * 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;
    font-size: 2em;
  }
  :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) {
    /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
    padding-inline-start: unset;
    /*
    * 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: "";
  }
  :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) {
    /*
    * 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;
    /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
    text-autospace: no-autospace;
  }
  /* ======================================================
  //  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;
    font-variation-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;
  }
  :where(abbr[title]) {
    /*
    * 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;
    cursor: help;
  }
  :where(time) {
    /* Set to `no-autospace` because date notations in typography do not include spaces. */
    text-autospace: no-autospace;
  }
  /* ======================================================
  //  MARK: Links
  // ====================================================== */
  :where(a:-moz-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;
  }
  :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 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;
    border-style: solid;
    /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
    border-color: unset;
    border-radius: unset;
    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(:-moz-placeholder)) {
    /*
    * 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(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) {
    /*
    * 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;
    /* The following default styles are often unnecessary, so they are reset. */
    margin-inline: unset;
    padding: unset;
    border: 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;
  }
  ::-moz-placeholder {
    /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
    opacity: unset;
  }
  ::placeholder {
    /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
    opacity: unset;
  }
  /* ======================================================
  //  MARK: Interactive elements
  // ====================================================== */
  :where(summary) {
    /* The default triangle marker is often unnecessary, so it is disabled. */
    list-style-type: "";
    /* Changing the cursor to a pointer clarifies the clickability of the element. */
    cursor: pointer;
  }
  :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]) {
    /*
    * 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;
    border: 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) {
    /*
    * 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;
    max-block-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;
  }
  /* append (kiso.css v1.2.2) */
  :where(blockquote, q) {
    quotes: none;
  }
  :where(blockquote:before, blockquote:after, q:before, q:after) {
    content: "";
    content: none;
  }
  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
  }
  :where(img) {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
  }
  :where(a) {
    text-decoration: none;
  }
  :where(fieldset, legend) {
    display: block;
    float: none;
    min-width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    line-height: inherit;
  }
  :where(:focus-visible) {
    outline-offset: 2px;
    outline: 2px solid var(--color--checked);
    box-shadow: 0 0 5px 2px var(--color--checked);
  }
}
@layer elements {
  /* html */
  :where(html) {
    font-size: 100%;
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
  }
  /* body */
  :where(body) {
    font-family: var(--font-family--default);
    font-weight: var(--font-weight--normal);
    color: var(--color--text);
    background-color: var(--color--body);
    /* 横スクロールバーの防止 */
    overflow-x: clip;
  }
  /* stop scroll under dialog */
  body[data-theme=school] {
    background-image: var(--img--theme-bg-image-main);
    background-repeat: repeat;
    background-position: top center;
    background-color: var(--color--theme-bg-main);
  }
  /* a */
  :where(a) {
    text-underline-offset: 0.2em;
  }
  /* tel */
  /* button */
  :where(button) {
    text-underline-offset: 0.2em;
  }
}
@layer project {
  /* wrapper */
  .wrapper {
    display: flex;
    flex-direction: column;
    max-width: var(--page-container-width-max);
    min-height: 100vh;
    margin-inline: auto;
    box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.0666666667), -1px 0 2px 0 rgba(0, 0, 0, 0.0666666667);
  }
  /* header */
  .p-header {
    display: block;
    z-index: var(--z-index--header);
  }
  .p-header--main-site {
    background-color: var(--color--theme-bg);
  }
  .p-header--simple {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100 * var(--to-rem));
    background-color: var(--color--theme-bg);
  }
  .p-header--simple .p-header-logo {
    height: 80%;
  }
  .p-header--simple .p-header-logo img {
    width: auto;
    height: 100%;
  }
  /* sunny header */
  .header {
    display: grid;
    grid-template-columns: auto 1fr;
    height: var(--header-height);
    color: #fff;
    background-color: var(--color--theme-bg-header);
    border-bottom: solid 1px transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1333333333);
    line-height: 1.25;
  }
  /* header__left-area */
  :where(.header .left-area) {
    display: flex;
    align-items: center;
  }
  :where(.header .left-area) > .logo,
  :where(.header .left-area .logo) a {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .header__title,
  :where(.header .left-area .logo) a::after {
    content: var(--text--theme-title);
    color: var(--color--theme-title);
    font-size: calc(20 * var(--to-rem));
    font-weight: var(--font-weight--bold);
    letter-spacing: 0.25em;
    padding-inline: 2em;
    line-height: 1.125;
  }
  .header__title a {
    display: block;
  }
  .header__title-brand {
    display: inline-block;
    margin-right: 0.5em;
  }
  .header__title-page {
    display: inline-block;
  }
  /* hidden system logo */
  :where(.header .left-area .logo) a {
    font-size: 0;
  }
  :where(.header .left-area .logo) a > img[src*="0072-sun"] {
    display: none;
  }
  /* header__right-area */
  .header .right-area {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }
  .header .right-area .title {
    display: none;
  }
  .header .right-area .header-nav ul {
    display: flex;
    height: calc(100% + 1px);
  }
  .header .right-area .header-nav ul li {
    display: flex;
    align-items: center;
    max-width: 550px;
    height: 100%;
    max-height: var(--header-height);
    border-left: solid 1px transparent;
    text-align: center;
    justify-content: center;
    font-size: calc(18 * var(--to-rem));
    transition: filter ease var(--transition-time);
  }
  .header .right-area .header-nav ul li:first-child {
    color: var(--color--theme-user);
    background-color: var(--color--theme-bg-user);
  }
  .header .right-area .header-nav ul li img {
    font-size: 1rem;
  }
  .header .right-area .header-nav ul li:first-child img {
    filter: var(--filter--theme-user-icon);
  }
  .header .right-area .header-nav ul li:last-child {
    color: var(--color--theme-logout);
    background-color: var(--color--theme-bg-logout);
  }
  .header .right-area .header-nav ul li:last-child img {
    filter: var(--filter--theme-icon);
  }
  .header .right-area .header-nav ul li a {
    display: grid;
    grid-template-columns: minmax(2em, auto) 1fr;
    gap: 0.5em;
    padding-inline: calc(var(--space-unit) * 2.5);
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header .right-area .header-nav ul li img {
    width: 1.5em;
    min-width: 1em;
    height: auto;
  }
  .header .right-area[style*=hidden] {
    display: none;
  }
  /* content-wrapper */
  .content-wrapper {
    flex-grow: 1;
    display: flex;
    align-self: stretch;
  }
  /* content */
  .content {
    flex-grow: 1;
    max-width: calc(var(--main-container-width-max) + var(--main-container-padding-inline) * 2);
    padding-inline: var(--main-container-padding-inline);
    margin-inline: 0;
    background-image: var(--img--theme-bg-image-main);
    background-repeat: repeat-y;
    background-position: top center;
    background-color: var(--color--theme-bg-main);
    padding-bottom: calc(var(--space-unit) * 2.5);
  }
  .content--school {
    --color--theme-bg-main: #ffd448;
    --img--theme-bg-image-main: url(../img/bg_main-school.png);
  }
  /* no side-menu */
  .content-wrapper:not(:has(.side-menu)) .content {
    max-width: var(--page-container-width-max);
    background-repeat: repeat;
  }
  .content:not(:has(> .breadcrumb)):not(:has(> .p-ms-breadcrumb)) {
    padding-top: calc(20 * var(--to-space-unit));
  }
  .content > * + * {
    margin-top: calc(var(--space-unit) * 1);
  }
  /* side-menu */
  .side-menu {
    display: flex;
    flex-direction: column;
    width: 200px;
    max-width: 100%;
    padding-block-end: calc(var(--space-unit) * 2.5);
    color: var(--color--text);
    background-color: var(--color--theme-bg-side);
    border-right: solid 1px transparent;
  }
  .side-menu dt {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: calc(var(--space-unit) / 2);
         column-gap: calc(var(--space-unit) / 2);
    align-items: center;
    padding-block: calc(var(--space-unit) * 0.8);
    padding-inline: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);
  }
  .side-menu dt,
  .side-menu dd {
    position: relative;
    font-weight: var(--font-weight--normal);
    border-bottom: 1px solid var(--color--theme-line);
    font-size: calc(16 * var(--to-rem));
  }
  .side-menu dt > a,
  .side-menu dd > a {
    display: block;
  }
  .side-menu dt > a::after,
  .side-menu dd > a::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
  }
  .side-menu dt img {
    width: 1.5em;
    height: auto;
    filter: var(--filter--theme-icon);
  }
  .side-menu dd {
    padding: 3px 0 3px 1.9rem;
  }
  .side-menu dd > span {
    font-size: 80%;
    margin-right: 4px;
  }
  .side-menu dt.active,
  .side-menu dd.active {
    background-color: color-mix(in sRGB, var(--color--theme-bg-side), var(--color--theme-bg-header) 10%);
  }
  .side-menu__main {
    margin-bottom: calc(var(--space-unit) * 0.5);
  }
  .side-menu__other {
    margin-block: auto 0;
  }
  /* 未読バッジのスタイル */
  .side-menu dt:has(.unread-badge) {
    padding-top: calc(var(--space-unit) * 1.5);
  }
  .side-menu .unread-badge {
    --badge-size: calc(20 * var(--to-rem));
    position: absolute;
    right: calc(var(--space-unit) * 1);
    top: calc(var(--space-unit) * 1.5 - var(--badge-size) + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(12 * var(--to-rem));
    font-weight: var(--font-weight--bold);
    line-height: 1;
    border-radius: calc(12 * var(--to-rem));
    color: var(--color--text-invert);
    background-color: var(--color--theme-em);
    border: 1px solid transparent;
    padding-inline: calc(6 * var(--to-rem));
    min-width: var(--badge-size);
    height: var(--badge-size);
  }
  .side-menu--sticky {
    position: sticky;
    top: 0;
    bottom: 0;
    height: 100vh;
    max-height: 100dvh;
    max-height: 100svh;
    padding-block-end: calc(var(--space-unit) * 2.5 + var(--header-height));
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.3333333333);
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .side-menu--sticky ::-webkit-scrollbar {
    display: none;
  }
  /* breadcrumb */
  .breadcrumb {
    display: grid;
    align-items: center;
    min-height: calc(var(--space-unit) * 3);
    font-size: calc(14 * var(--to-rem));
  }
  .breadcrumb > ol > li {
    display: inline-block;
    margin-right: 0.25em;
  }
  .breadcrumb > ol > li + li::before {
    content: "> ";
    margin-right: 0.25em;
  }
  .breadcrumb > ol > li a:hover {
    text-decoration: underline;
  }
  .breadcrumb + * {
    margin-top: 0;
  }
  /* footer */
  .footer {
    position: sticky;
    top: 100vh;
    display: var(--deiplay--footer);
  }
  /* section */
  .section-normal,
  .section-rounded {
    --section-border-width: 3px;
    max-width: var(--main-container-width-max);
    padding-block: var(--containter-padding-block);
    padding-inline: var(--containter-padding-inline);
    margin-inline: auto;
    background-color: var(--color--theme-bg);
    border: solid var(--section-border-width) var(--color--theme-section-border);
  }
  .section-rounded {
    border-radius: var(--radius--l);
  }
  /* section title */
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: calc(50 * var(--to-space-unit));
    padding-block: calc(5 * var(--to-space-unit));
    padding-inline: calc(14 * var(--to-space-unit));
    border-radius: var(--radius--s);
    background-color: var(--color--theme-bg-title);
    border: solid var(--section-border-width) var(--color--theme-bg-title);
  }
  .section-title > h2 {
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: calc(2 * var(--to-space-unit));
    padding-inline: calc(20 * var(--to-space-unit));
    border-left: solid var(--section-border-width);
    font-size: calc(24 * var(--to-space-unit));
    font-weight: var(--font-weight--bold);
    letter-spacing: 0.125em;
    line-height: 1.25;
    color: var(--color--text-invert);
  }
  .section-normal:has(.section__footer),
  .section-rounded:has(.section__footer) {
    padding-bottom: 0;
  }
  .section__footer {
    display: block;
    width: auto;
    padding-block: var(--containter-padding-block);
    margin-inline: calc(-1 * (var(--containter-padding-inline) + var(--section-border-width)));
    margin-block: 0 calc(-1 * var(--section-border-width));
    border: solid var(--section-border-width) var(--color--theme-section-border);
    border-top: none;
  }
  .section-rounded .section__footer {
    border-radius: 0 0 var(--radius--l) var(--radius--l);
  }
  .section__footer--bg-gray {
    background-color: #f7f7f7;
    border-color: #f7f7f7;
  }
  /* section title width button */
  .section-title > div {
    display: flex;
    margin-block: calc(4 * var(--to-space-unit)) 0;
  }
  .section-title > div > button {
    padding-block: calc(2 * var(--to-space-unit));
    padding-inline: calc(15 * var(--to-space-unit));
    margin-right: calc(var(--space-unit) / 3);
    border: 1px solid transparent;
    border-radius: var(--radius--s);
    color: var(--color--theme-bg-title);
    background-color: var(--color--text-invert);
    font-size: 0.9375em;
    letter-spacing: 0.0625em;
  }
  .section-title > div > button:last-child {
    margin-right: 0;
  }
  .section-title > div > button > img {
    width: 1.5em;
    filter: var(--filter--theme-icon);
    margin-right: 0.5rem;
  }
  .section-title + * {
    margin-top: calc(8 * var(--to-space-unit));
  }
  /* section-content */
  .section-content {
    display: flow-root;
    background-color: var(--color--theme-bg);
  }
  :where(.section-content a[href]) {
    text-decoration: underline;
    color: var(--color--theme-link);
  }
  /* use longin page etc. */
  .section-wrapper {
    margin: auto;
    max-width: calc(600 * var(--to-rem));
  }
  /* hover */
  /* table */
  .list-table {
    --border-width: 2px;
    --border-color: var(--color--theme-bg);
    --pseudo-border-offset: calc(var(--border-width) * -1);
    --pseudo-border-offset-y: calc(var(--space-unit) / 2);
    overflow-wrap: break-word;
    width: 100%;
    border: solid var(--border-width) var(--border-color);
    border-collapse: collapse;
    font-size: calc(14 * var(--to-rem));
  }
  .list-table th, .list-table td {
    position: relative;
    border: solid var(--border-width) var(--border-color);
    padding-block: calc(var(--space-unit) * 1);
    padding-inline: calc(var(--space-unit) / 2);
    vertical-align: middle;
  }
  .list-table th {
    text-align: center;
    font-weight: var(--font-weight--normal);
    background-color: var(--color--theme-line);
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .list-table td {
    white-space: wrap;
    word-break: break-all;
    word-wrap: break-word;
  }
  .list-table th a {
    color: var(--color--text);
  }
  .list-table tr > td:not(:first-child)::before {
    content: "";
    position: absolute;
    left: var(--pseudo-border-offset);
    inset-block: var(--pseudo-border-offset-y);
    width: var(--border-width);
    background-color: var(--color--theme-line);
  }
  .list-table tr > td::after {
    content: "";
    position: absolute;
    left: var(--pseudo-border-offset);
    right: 0;
    bottom: var(--pseudo-border-offset);
    height: var(--border-width);
    background-color: var(--color--theme-line);
  }
  .list-table th a {
    text-decoration: none;
  }
  [data-theme=school] .list-table--contact .list-table__col--company-name {
    width: 25%;
  }
  [data-theme=school] .list-table--contact .list-table__col--lesson-name {
    width: 25%;
  }
  [data-theme=school] .list-table--contact .list-table__col--date-publish {
    width: 15%;
  }
  [data-theme=school] .list-table--contact .list-table__col--date-update {
    width: 15%;
  }
  [data-theme=school] .list-table--contact .list-table__col--status {
    width: 10%;
  }
  [data-theme=school] .list-table--contact .list-table__col--button {
    width: 10%;
  }
  [data-theme=school] .list-table--offer .list-table__col--checkbox {
    width: 5%;
  }
  [data-theme=school] .list-table--offer .list-table__col--id {
    width: 8%;
  }
  [data-theme=school] .list-table--offer .list-table__col--company-name {
    width: 25%;
  }
  [data-theme=school] .list-table--offer .list-table__col--offer-text {
    width: 37%;
  }
  [data-theme=school] .list-table--offer .list-table__col--date-publish {
    width: 15%;
  }
  [data-theme=school] .list-table--offer .list-table__col--button {
    width: 10%;
  }
  /* hr */
  hr.border-solid {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 2px solid var(--color--theme-line);
  }
  /* pagenation */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--space-unit) * 2);
  }
  .pagination > li {
    display: flex;
    margin-inline: calc(var(--space-unit) * 0.33333);
  }
  .pagination > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(35 * var(--to-rem));
    min-height: calc(35 * var(--to-rem));
    padding-inline: calc(3 * var(--to-rem));
    color: var(--color--theme-paging);
    border: 1px solid var(--color--theme-paging);
    background-color: initial;
    font-size: calc(14 * var(--to-rem));
    font-weight: var(--font-weight--normal);
    text-box: trim-both cap alphabetic;
  }
  .pagination > li a.active {
    color: var(--color--text-invert);
    background-color: var(--color--theme-paging);
  }
  .pagination > li a.prev,
  .pagination > li a.next {
    border: initial;
    background-color: initial;
  }
  /* data-group */
  /* data-group1 standard */
  dl.data-group1 {
    display: flex;
    flex-wrap: nowrap;
    overflow-wrap: break-word;
  }
  dl.data-group1 > dt {
    width: 100%;
    max-width: 35%;
    padding-block: calc(10 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(5 * var(--to-space-unit)) calc(10 * var(--to-space-unit));
    font-weight: normal;
  }
  dl.data-group1 > dd {
    flex: 1;
    padding-block: calc(10 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
  }
  dl.data-group1 > dd + dt {
    flex: 0 0 20%;
    justify-content: space-around;
  }
  dl.data-group1 > dd + dt + dd {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  dl.data-group1.self,
  dl.data-group1.company,
  [data-theme=company] dl.data-group1.company,
  [data-theme=school] dl.data-group1.school,
  dl.data-group1--self,
  dl.data-group1--person1 {
    background-color: var(--color--theme-bg-chat-zebra);
  }
  dl.data-group1.other,
  dl.data-group1.school,
  [data-theme=company] dl.data-group1.school,
  [data-theme=school] dl.data-group1.company,
  dl.data-group1--other,
  dl.data-group1--person2 {
    background-color: var(--color--theme-bg);
  }
  dl.data-group1.other2,
  dl.data-group1--person3 {
    background-color: color-mix(in srgb, var(--color--theme-bg-chat-zebra) 100%, #06f 10%);
  }
  dl.data-group1.other3,
  dl.data-group1--person4 {
    background-color: color-mix(in srgb, var(--color--theme-bg-chat-zebra) 100%, #06f 20%);
  }
  .section-content .data-group1:last-of-type {
    margin-bottom: calc(15 * var(--to-space-unit));
  }
  dl:has(.data-group1):last-of-type {
    margin-bottom: 0;
  }
  /* etc. */
  dl.data-group1 > dd:has(.data-group1-2) {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  dl.data-group1-2 {
    width: 50%;
  }
  dl.data-group1-2 > dt {
    font-weight: normal;
    padding-block: calc(10 * var(--to-space-unit)) 0;
    padding-inline: calc(10 * var(--to-space-unit));
  }
  dl.data-group1-2 > dd {
    padding-block: calc(10 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
  }
  dl.data-group1 > .dt-vtop {
    padding-top: calc(15 * var(--to-space-unit));
    align-items: flex-start;
  }
  /* data-group2 for search? */
  dl.data-group2 {
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: break-word;
    min-width: calc(200 * var(--to-space-unit));
    margin-bottom: calc(5 * var(--to-space-unit));
  }
  dl.data-group2 > dt {
    padding-block: calc(5 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: normal;
  }
  dl.data-group2 > dd {
    flex: 1;
    padding-block: calc(5 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
  }
  /* data-group3 for login */
  dl.data-group3 {
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: break-word;
  }
  dl.data-group3:first-of-type {
    margin-top: calc(1 * var(--space-unit));
  }
  dl.data-group3 > dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 8em;
    padding-block: calc(20 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit)) 0;
    font-weight: var(--font-weight--normal);
  }
  dl.data-group3 > dt > label {
    margin: 0 auto 0 0;
  }
  dl.data-group3 > dd {
    flex: 1;
    padding: calc(8 * var(--to-space-unit));
  }
  dl.data-group3 > dd input {
    margin-top: calc(5 * var(--to-space-unit));
  }
  dl.data-group3 > dd input + span {
    vertical-align: middle;
  }
  dl.data-group3 + .button-area {
    margin-top: calc(1 * var(--space-unit));
  }
  dl.data-group3 + .button-area button {
    margin-bottom: calc(5 * var(--to-space-unit));
  }
  /* nest */
  dl.data-group1 > dd > dl.data-group1 > dt { /* fallback */
    max-width: calc(100 * var(--to-space-unit));
  }
  dl.data-group1 > dt:has(+ dd dl.data-group1) {
    width: 10%;
    border-right: 2px solid var(--color--theme-line);
  }
  dl.data-group1 > dd:has(dl.data-group1) {
    padding-block: 0;
    padding-left: 0;
  }
  dl.data-group1 > dd > dl.data-group1 > dt {
    width: 28%;
    max-width: 100%;
  }
  dl.data-group1 > dt .sub-label {
    color: gray;
    font-size: 0.875em;
  }
  /* 必須のデザインが逆 */
  .p-form-container dl.data-group1:not(:has(dl.data-group1)) > dt {
    justify-content: flex-start;
  }
  .p-form-container dl.data-group1:not(:has(dl.data-group1)) > dt label,
  .p-form-container dl.data-group1:not(:has(dl.data-group1)) > dt .label {
    order: 1;
  }
  /* chatblock */
  .chatblock {
    margin: 0.5em;
  }
  .chatblock .section-content {
    background-color: transparent;
  }
  .chatblock .block-h {
    display: flex;
    justify-content: space-between;
  }
  .chatblock .block-h .poster-name {
    font-weight: bold;
  }
  .chatblock .block-h .posted-date {
    font-weight: lighter;
    font-size: small;
  }
  .chatblock .block-l {
    margin: 1em 0;
  }
  .chatblock .block-l .temp-area {
    margin-top: 1em;
  }
  .chatblock .block-l .temp-area a {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
  }
  .chatblock .block-l .temp-area a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
  .input-area {
    height: 200px;
  }
  .input-area textarea {
    width: 1430px;
    height: 180px;
    background: white;
    margin: 20px;
  }
  .item-area-center .right img[onclick*=triggerFileSelect] {
    height: 25px;
    width: auto;
    margin-right: 20px;
    margin-left: 1em;
    cursor: pointer;
    transition: all 0.1s ease;
  }
  .item-area-center .right img[onclick*=triggerFileSelect]:active {
    transform: translateY(2px);
  }
  .item-area-center .right img[onclick*=triggerFileSelect]:hover {
    transform: translateY(-2px);
  }
  .sunnybox-contents-area dl.data-group1 > dt {
    width: 120px;
  }
  .sunnybox-contents-area .section-content .data-group1:last-of-type {
    margin-bottom: unset;
  }
  .chatblock dl.data-group1:not(dl + dl),
  .detailblock dl.data-group1:not(dl + dl) {
    border-top: solid 2px var(--color--theme-line);
  }
  .chatblock dl.data-group1 > dt,
  .detailblock dl.data-group1 > dt {
    width: 25%;
    background-color: color-mix(in srgb, var(--color--theme-bg), #000 2.5%);
    border-bottom: solid 2px var(--color--theme-line);
    border-right: solid 2px var(--color--theme-line);
  }
  .chatblock dl.data-group1 > dd,
  .detailblock dl.data-group1 > dd {
    background-color: var(--color--theme-bg);
    border-bottom: solid 2px var(--color--theme-line);
  }
  /* message */
  .item-note,
  .error-message,
  .item-message {
    font-size: var(--font-size--xs);
    padding: calc(10 * var(--to-space-unit)) calc(2 * var(--to-space-unit)) 0;
  }
  .error-message {
    width: -moz-fit-content;
    width: fit-content;
    padding: calc(10 * var(--to-space-unit)) calc(1 * var(--space-unit));
    margin-block: calc(5 * var(--to-space-unit));
    border-radius: var(--radius--s);
    font-size: var(--font-size--xs);
    font-weight: var(--font-weight--bold);
    color: var(--color--error);
    background-color: var(--color--error-bg);
  }
  .message-success,
  .message-error,
  .message-caution {
    border-width: 3px;
    border-style: solid;
    padding: calc(10 * var(--to-space-unit));
    border-radius: 2px;
  }
  .message-success {
    background-color: var(--color--success-bg);
    border-color: var(--color--success-border);
  }
  .message-error {
    background-color: var(--color--error-bg);
    border-color: var(--color--error-border);
  }
  .message-caution {
    background-color: var(--color--caution-bg);
    border-color: var(--color--caution-border);
  }
  .message-success .item-message {
    color: var(--color--success);
  }
  .message-error .item-message {
    color: var(--color--error);
  }
  .message-caution .item-message {
    color: var(--color--caution);
  }
  .message-group {
    display: flex;
  }
  .message-group > dt {
    padding: 0;
  }
  .message-group > dd {
    padding: 4px 8px;
  }
  dl.error {
    background-color: var(--color--error-bg);
  }
  dl.error > dt,
  dl.error > dd {
    background-color: var(--color--error-bg);
  }
  dl > dt.error,
  dl > dd.error {
    background-color: var(--color--error-bg);
  }
  dl.error .item-message,
  dl.error > dt .item-message,
  dl.error > dd .item-message,
  dl > dt.error .item-message,
  dl > dd.error .item-message {
    color: var(--color--error);
  }
  .p-form-container dl.error,
  .p-form-container dl.error > dt,
  .p-form-container dl.error > dd,
  .p-form-container dl > dt.error,
  .p-form-container dl > dd.error {
    background-color: var(--color--theme-bg);
  }
  /* icon-color */
  .icon-white {
    filter: invert(100%) sepia(34%) saturate(2%) hue-rotate(256deg) brightness(111%) contrast(101%);
  }
  .icon-black,
  .icon-caution {
    filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(327deg) brightness(96%) contrast(104%);
  }
  .icon-red,
  .icon-error {
    filter: invert(11%) sepia(79%) saturate(7114%) hue-rotate(359deg) brightness(103%) contrast(112%);
  }
  .icon-success,
  .icon-green {
    filter: invert(41%) sepia(82%) saturate(329%) hue-rotate(94deg) brightness(94%) contrast(92%);
  }
  /* button module */
  button.btn-default {
    --border-width: 2px;
    --bg-color: var(--color--theme-gray);
    --hover-dark-per: 15%;
    min-width: calc(70 * var(--to-space-unit));
    max-width: 100%;
    min-height: var(--form-parts-height--s);
    border: solid var(--border-width) var(--bg-color);
    border-radius: var(--radius--s);
    color: var(--color--text-invert);
    background-color: var(--bg-color);
    margin: 0;
    font-size: 1rem;
    text-align: center;
  }
  .button-white {
    --border-width: 2px;
    --bg-color: var(--color--text-invert);
    --hover-dark-per: 8%;
    min-width: calc(100 * var(--to-space-unit));
    max-width: 100%;
    min-height: var(--form-parts-height--m);
    margin-right: calc(var(--space-unit) / 3);
    border: solid var(--border-width) var(--color--theme-gray);
    border-radius: 5px;
    color: var(--color--theme-gray);
    background-color: var(--bg-color);
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
  }
  .button-white:disabled {
    background-color: color-mix(in srgb, var(--bg-color), #000 10%);
    opacity: 0.5;
  }
  :has(input[name=mode][value=login]) .button-white {
    width: calc(208 * var(--to-space-unit));
  }
  /* button-area? */
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 10px;
  }
  .button-area {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0 4px 8px 10px;
  }
  .icon-button {
    --border-width: 2px;
    --bg-color: var(--color--theme-gray);
    --hover-dark-per: 10%;
    min-width: calc(100 * var(--to-space-unit));
    max-width: 100%;
    min-height: var(--form-parts-height--s);
    margin-right: calc(var(--space-unit) / 3);
    border: solid var(--border-width) var(--bg-color);
    border-radius: var(--radius--s);
    color: var(--color--text-invert);
    background-color: var(--bg-color);
    font-size: 1rem;
    text-align: center;
    vertical-align: middle;
  }
  label.icon-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .icon-button > img {
    margin: auto 0.25rem auto 0;
  }
  .button-orange {
    --border-width: 2px;
    --bg-color: #ff7900;
    --hover-dark-per: 10%;
  }
  .button-area > button.icon {
    --border-width: 2px;
    --bg-color: var(--color--theme-gray);
    --hover-dark-per: 15%;
    display: flex;
    align-items: center;
    min-width: calc(100 * var(--to-space-unit));
    max-width: 100%;
    min-height: var(--form-parts-height--m);
    border: solid var(--border-width) var(--bg-color);
    border-radius: var(--radius--s);
    color: var(--color--text-invert);
    background-color: var(--bg-color);
    margin-right: calc(var(--space-unit) / 3);
    font-size: 1rem;
    text-align: center;
  }
  .button-area > button.icon > img {
    margin: 0 calc(8 * var(--to-space-unit));
  }
  /* button textbox */
  .button-textbox {
    --border-width: 2px;
    --bg-color: var(--color--theme-gray);
    --hover-dark-per: 15%;
    min-width: calc(120 * var(--to-space-unit));
    max-width: 100%;
    min-height: var(--form-parts-height--s);
    border: solid var(--border-width) var(--bg-color);
    border-radius: var(--radius--s);
    color: var(--color--text-invert);
    background-color: var(--bg-color);
    margin-right: calc(var(--space-unit) / 3);
    font-size: 1rem;
    text-align: center;
  }
  .button-textbox:first-of-type {
    margin-left: calc(var(--space-unit) / 3);
  }
  .button-textbox:last-of-type {
    margin-right: 0;
  }
  .button-confirm,
  .button-delete,
  .button-normal,
  .button-safe,
  .button-attention {
    --min-width:;
    --hover-dark-per: 15%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1em;
    align-items: center;
    min-width: var(--min-width, auto);
    min-height: var(--form-parts-height--m);
    padding: 0.25em 1em;
    margin-right: calc(5 * var(--to-space-unit));
    margin-bottom: calc(5 * var(--to-space-unit));
    border: solid 2px var(--border-color);
    border-radius: var(--radius--s);
    background-color: var(--bg-color);
    letter-spacing: 0.0625em;
    text-align: center;
    transition: background-color ease var(--transition-time);
  }
  .button-confirm {
    --bg-color: #005274;
    --border-color: #005274;
    --hover-dark-per: 20%;
    color: #fff;
  }
  .button-delete {
    --bg-color: #f8f8ff;
    --border-color: #444444;
    color: var(--color--text);
  }
  .button-normal {
    --bg-color: #e5e5e5;
    --border-color: #e5e5e5;
    --hover-dark-per: 8%;
    color: var(--color--text);
  }
  .button-normal-dark {
    --bg-color: var(--color--theme-gray);
    --border-color: var(--color--theme-gray);
    color: var(--color--text-invert);
  }
  .button-negative {
    --bg-color: var(--color--theme-bg);
    --border-color: var(--color--text);
    --hover-dark-per: 5%;
    color: var(--color--text);
  }
  .button-safe {
    --bg-color: #d4e4ff;
    --border-color: #d4e4ff;
    --hover-dark-per: 8%;
    color: #005274;
  }
  .button-attention {
    --bg-color: var(--color--theme-em);
    --border-color: var(--color--theme-em);
    --hover-dark-per: 8%;
    color: #fff;
  }
  .button-confirm::before,
  .button-delete::before,
  .button-normal::before,
  .button-safe::before,
  .button-attention::before,
  .button-confirm::after,
  .button-delete::after,
  .button-normal::after,
  .button-safe::after,
  .button-attention::after {
    content: "";
    display: block;
  }
  .button-confirm:disabled,
  .button-delete:disabled,
  .button-normal:disabled,
  .button-safe:disabled,
  .button-attention:disabled {
    opacity: 0.5;
  }
  .button--arrow-r::after {
    width: 0.75em;
    height: 0.75em;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: scaleX(0.75) rotate(45deg);
  }
  .button--m {
    font-size: var(--font-size--m);
  }
  .button--l {
    font-size: var(--font-size--l);
  }
  .button--xl {
    font-size: var(--font-size--xl);
  }
  .button--w140 {
    --min-width: calc(140 * var(--to-space-unit));
    max-width: 100%;
  }
  .button--w320 {
    --min-width: calc(320 * var(--to-space-unit));
    max-width: 100%;
  }
  .button--radius-s {
    border-radius: var(--radius--s);
  }
  .button--radius-m {
    border-radius: var(--radius--m);
  }
  .button--radius-l {
    border-radius: var(--radius--l);
  }
  .button--radius-xl {
    border-radius: var(--radius--xl);
  }
  .button--vl-l {
    padding-block: 0.75em;
  }
  #delete-button-area {
    display: flex;
    align-items: center;
    -moz-column-gap: 0.5em;
         column-gap: 0.5em;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    margin-left: calc(80 * var(--to-space-unit));
  }
  .item-area-center {
    display: flex;
    justify-content: center;
    padding-block: calc(25 * var(--to-space-unit)) calc(5 * var(--to-space-unit));
    padding-inline: calc(10 * var(--to-space-unit));
  }
  .item-area-center > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .item-area-center > ul > li {
    padding: 0 1em;
    margin-top: calc(5 * var(--to-rem));
  }
  .notification-button-wrapper {
    position: relative;
    display: inline-block;
  }
  .notification-button-wrapper .notification-badge {
    --badge-size: calc(20 * var(--to-rem));
    pointer-events: none;
    position: absolute;
    right: calc(var(--badge-size) * -0.5);
    top: calc(var(--badge-size) * -0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size--xs);
    font-weight: var(--font-weight--bold);
    line-height: 1;
    border-radius: calc(12 * var(--to-rem));
    color: var(--color--text-invert);
    background-color: var(--color--theme-em);
    border: 1px solid transparent;
    padding-inline: calc(6 * var(--to-rem));
    min-width: var(--badge-size);
    height: var(--badge-size);
  }
  .notification-button-wrapper .notification-badge::after {
    content: "!";
    display: block;
  }
  .button-area ul {
    width: 100%;
    margin: calc(10 * var(--to-space-unit));
    text-align: center;
  }
  .button-area ul li {
    display: inline-block;
  }
  .required,
  .optional {
    padding: 0.6em 0.75em;
    margin-inline: 0;
    white-space: nowrap;
    background-color: var(--color--theme-bg);
    border: 1px solid;
    border-radius: var(--radius--xxs);
    font-size: var(--font-size--xs);
    letter-spacing: 0.125em;
    text-box: trim-both cap alphabetic;
  }
  .required {
    color: var(--color--theme-em);
  }
  .optional {
    color: var(--color--theme-gray);
  }
  .p-side-button {
    --bg-color: var(--color--theme-bg-header);
    --hover-dark-per: 5%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.25em;
    color: var(--color--text);
    width: calc(100% - var(--space-unit) * 1);
    padding: 0.75em calc(var(--space-unit) * 0.5);
    margin-inline: auto;
    border-radius: var(--radius--s);
    background-color: var(--bg-color);
    line-height: 1.125;
    box-shadow: calc(3 * var(--to-rem)) calc(3 * var(--to-rem)) 0 0 rgba(0, 0, 0, 0.1333333333);
  }
  .p-side-button::before,
  .p-side-button::after {
    content: "";
    display: block;
  }
  .p-side-button::after {
    width: 0.75em;
    height: 0.75em;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: scaleX(0.75) rotate(45deg);
  }
  .p-side-button[href]:hover .\:inline-block {
    text-decoration: underline;
  }
  /* form text */
  .form-text,
  .form-textarea {
    width: 100%;
    padding: calc(10 * var(--to-space-unit)) 0.75em;
    border: solid 1px var(--color--theme-form-border);
    background-color: var(--color--theme-bg);
    border-radius: var(--radius--xs);
  }
  .form-text {
    height: var(--form-parts-height--m);
  }
  .form-textarea {
    resize: none;
  }
  .form-text:-moz-read-only, .form-textarea:-moz-read-only {
    background-color: var(--color--theme-line);
    opacity: 0.5;
  }
  .form-text:disabled,
  .form-text:read-only,
  .form-textarea:disabled,
  .form-textarea:read-only {
    background-color: var(--color--theme-line);
    opacity: 0.5;
  }
  .input-area {
    height: auto !important;
  }
  .input-area textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 4.5lh;
    min-height: 4.5lh;
    padding: calc(10 * var(--to-space-unit)) 0.75em !important;
    margin-block: calc(var(--space-unit) * 2) 0;
    margin-inline: auto !important;
    border: solid 1px var(--color--theme-form-border) !important;
    background-color: var(--color--theme-bg) !important;
    border-radius: var(--radius--xs) !important;
  }
  /* select */
  .select-container {
    --arrow-area-width: calc(var(--space-unit) * 3.66666);
    --border-width: 2px;
    --form-padding-y: calc((var(--form-parts-height--m) - var(--border-width) * 2 - 1lh) / 2);
    --input-padding-x: calc(var(--space-unit) * 1);
    position: relative;
  }
  .select-container::before {
    pointer-events: none;
    content: "";
    position: absolute;
    right: 0;
    inset-block: 0;
    width: var(--arrow-area-width);
    background-color: var(--color--theme-gray);
    border-radius: 0 var(--radius--s) var(--radius--s) 0;
  }
  .select-container::after {
    pointer-events: none;
    content: "";
    position: absolute;
    right: calc(var(--arrow-area-width) / 2);
    top: 50%;
    background-color: var(--color--text-invert);
    aspect-ratio: 1/1;
    width: calc(var(--arrow-area-width) / 4.5);
    clip-path: polygon(0 0, 100% 0%, 50% 86.66%);
    translate: 50% -50%;
  }
  .select-container > select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    padding-block: var(--form-padding-y);
    padding-inline: var(--input-padding-x) calc(var(--arrow-area-width) + var(--input-padding-x) / 2);
    border: solid var(--border-width) var(--color--theme-line);
    color: var(--color--text);
    background-color: var(--color--theme-bg);
    border-radius: var(--radius--s);
  }
  /* checkbox and radio */
  [type=checkbox],
  [type=radio] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    position: relative;
    aspect-ratio: 1/1;
    border: solid 1px var(--color--theme-form-border);
    background-color: var(--color--theme-bg);
    vertical-align: middle;
    margin-right: 0.25em;
  }
  [type=checkbox]::before,
  [type=radio]::before {
    content: "";
    position: absolute;
    opacity: 0;
    transition: transform ease var(--transition-time), opacity ease var(--transition-time);
  }
  /* checkbox */
  [type=checkbox] {
    width: 1.5em;
  }
  [type=checkbox]::before {
    top: -10%;
    left: 50%;
    width: 0.75em;
    height: 1.25em;
    transform: translateX(-50%) rotate(0deg) skewX(15deg) scale(0);
  }
  [type=checkbox]:checked::before {
    opacity: 1;
    border-right: solid 4px var(--color--checked);
    border-bottom: solid 4px var(--color--checked);
    transform: translateX(-50%) rotate(45deg) skewX(15deg) scale(1);
  }
  /* radio */
  [type=radio] {
    width: 1.5em;
    border-radius: 50%;
  }
  [type=radio]::before {
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    width: 60%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
  [type=radio]:checked::before {
    opacity: 1;
    border: solid 1px var(--color--checked);
    background-color: var(--color--checked);
    transform: translate(-50%, -50%) scale(1);
  }
  /* pager */
  .pager-container {
    display: flex;
    justify-content: space-between;
    margin-block: calc(10 * var(--to-space-unit));
    margin-inline: calc(10 * var(--to-space-unit)) 0;
  }
  .pager-container > li:nth-child(1) {
    flex-basis: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .pager-container > li:nth-child(2) {
    flex-basis: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pager-container > li:nth-child(3) {
    flex-basis: 33%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .pager-container .select-container {
    width: -moz-fit-content;
    width: fit-content;
  }
  .pager-container .select-container + span {
    margin-left: calc(5 * var(--to-space-unit));
  }
  .pager-container .prev {
    margin-right: 1rem;
  }
  .pager-container .next {
    margin-left: 1rem;
  }
  .pager-container a {
    color: var(--color--text);
  }
  /* icon */
  .icon-color-primary {
    filter: var(--filter--theme-icon);
  }
  .icon-to-popup {
    cursor: pointer;
    display: inline-block;
    width: 1.5em;
    height: auto;
    margin-right: auto;
    filter: var(--filter--theme-icon);
  }
  /* title */
  .p-page-title {
    display: block;
    position: relative;
    font-size: calc(32 * var(--to-rem));
    letter-spacing: 0.125em;
    line-height: 1.125;
    text-align: center;
    padding-bottom: calc(15 * var(--to-space-unit));
    margin-block: 0 calc(10 * var(--to-space-unit));
  }
  .p-page-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.5em;
    height: 0;
    border-bottom: solid calc(4 * var(--to-space-unit));
    transform: translateX(-50%);
  }
  /* contact-person */
  .p-contact-person {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto 0;
    font-weight: var(--font-weight--bold);
  }
  .p-contact-person__name {
    display: inline-block;
  }
  .p-contact-person__name:not(:first-child)::before {
    content: "－";
    display: inline-block;
    margin-inline: 0.75em 1em;
  }
  /* main site layout */
  .p-ms-hover {
    transition: opacity ease var(--transition-time);
  }
  /* main site layout header */
  .p-ms-header {
    display: grid;
    max-width: var(--main-container-width-max);
    padding-inline: calc(1 * var(--space-unit));
    padding-block: calc(1 * var(--space-unit)) calc(1 * var(--space-unit));
    margin-inline: auto;
    line-height: 1.5;
  }
  .p-ms-header__logo img {
    width: auto;
    height: 100%;
  }
  .p-ms-header__nav-open {
    display: none;
  }
  /* main site layout footer */
  .p-ms-footer {
    display: block !important;
    background-color: var(--color--theme-bg);
  }
  .p-ms-footer__container {
    display: grid;
    max-width: var(--main-container-width-max);
    padding-inline: calc(1 * var(--space-unit));
    padding-block: calc(2 * var(--space-unit));
    margin-inline: auto;
  }
  .p-ms-footer__information {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--space-unit));
    align-self: center;
  }
  .p-ms-footer__nav {
    display: flex;
  }
  .p-ms-footer__nav li {
    min-width: 11em;
    margin-right: 1em;
    margin-bottom: 0.5em;
    font-size: calc(15 * var(--to-rem));
  }
  .p-ms-footer__nav > ul > li > ul {
    margin-top: 0.5em;
  }
  .p-ms-footer__nav > ul > li > ul > li {
    margin-left: 1em;
  }
  .p-ms-footer__nav > ul > li > ul > li::before {
    content: "-";
    display: inline-block;
    margin-right: 0.5em;
  }
  .p-ms-footer__sns > ul {
    display: flex;
    gap: 0.75rem;
  }
  .p-ms-footer__address .s-br {
    display: none;
  }
  .p-ms-footer__copyright {
    text-align: center;
    color: var(--color--text-invert);
    background-color: #7B808A;
    line-height: 1.125;
    text-box: trim-both cap alphabetic;
  }
  .p-ms-footer a {
    transition: opacity ease var(--transition-time);
  }
  /* main site layout breadcrumb */
  .p-ms-breadcrumb {
    margin-inline: calc(-1 * var(--main-container-padding-inline));
    background-color: #e7e7e7;
    padding-inline: calc(1 * var(--space-unit));
    margin-bottom: calc(20 * var(--to-space-unit));
  }
  .p-ms-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--main-container-width-max);
    margin-inline: auto;
  }
  .p-ms-breadcrumb li {
    padding-block: 1em;
    font-size: calc(13 * var(--to-rem));
    line-height: 1.125;
    text-box: trim-both cap alphabetic;
  }
  .p-ms-breadcrumb li:not(:last-child)::after {
    content: "＞";
    margin-inline: 0.75em;
  }
  .p-ms-breadcrumb a {
    transition: opacity ease var(--transition-time);
  }
  /* content header */
  .p-content-header {
    display: block;
    container-type: inline-size;
    position: relative;
    max-width: calc(var(--main-container-width-max) + 2 * var(--containter-padding-inline));
    padding-block: 0 calc(30 * var(--to-space-unit));
    margin-inline: auto;
  }
  .p-content-header__icon {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100px;
    margin-inline: auto;
  }
  .p-content-header__title {
    --text-stroke: 3px #ffe795ff;
    display: block;
    position: relative;
    padding-inline: calc(1 * var(--containter-padding-inline));
    margin-block: 0.25em 0;
    font-size: calc(26 * var(--to-space-unit));
    letter-spacing: 0.125em;
    line-height: 1.25;
    text-align: center;
    -webkit-text-stroke: var(--text-stroke);
    text-stroke: var(--text-stroke);
    paint-order: stroke;
    text-shadow: 0 0 10px rgba(255, 231, 149, 0.4392156863);
    z-index: 2;
  }
  .p-content-header__title-bg-blur {
    --filter: blur(3px);
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    padding: calc(5 * var(--to-space-unit)) calc(10 * var(--to-space-unit));
    margin-inline: auto;
    text-align: center;
    border-radius: var(--radius--m);
    backdrop-filter: var(--filter);
  }
  .p-content-header__title-marker {
    display: inline;
    background: linear-gradient(transparent 55%, #ffe795 45%);
  }
  .p-content-header + .section-normal,
  .p-content-header + .section-rounded {
    position: relative;
    min-height: 100px;
    margin-top: 0;
    z-index: 1;
  }
  .p-content-header--has-person::before,
  .p-content-header--has-person + .section-normal::before,
  .p-content-header--has-person + .section-rounded::before,
  .p-content-header--has-person + .section-normal::after,
  .p-content-header--has-person + .section-rounded::after {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 1 * var(--containter-padding-inline));
    width: 100vw;
    height: var(--height);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(-50%);
  }
  .p-content-header--has-person::before {
    --height: min(22vw, 218 * var(--to-space-unit));
    bottom: calc(-0.38 * var(--height));
    max-width: calc(100cqw + 0 * var(--containter-padding-inline));
    background-image: url(../img/main-site/h1_bg_left.png), url(../img/main-site/h1_bg_right.png);
    background-position: top left, top right;
    z-index: 0;
  }
  .p-content-header--has-person + .section-normal::before,
  .p-content-header--has-person + .section-rounded::before,
  .p-content-header--has-person + .section-normal::after,
  .p-content-header--has-person + .section-rounded::after {
    container-type: inline-size;
    max-width: calc(100% + 2 * var(--containter-padding-inline));
    z-index: 1;
  }
  .p-content-header--has-person + .section-normal::before,
  .p-content-header--has-person + .section-rounded::before {
    --height: min(2.2vw, 21 * var(--to-space-unit));
    top: calc(-0.55 * var(--height));
    background-image: url(../img/main-site/h1_hand_left.png);
    background-position: top left 6.5%;
  }
  .p-content-header--has-person + .section-normal::after,
  .p-content-header--has-person + .section-rounded::after {
    --height: min(2.3vw, 23 * var(--to-space-unit));
    top: calc(-0.55 * var(--height));
    background-image: url(../img/main-site/h1_hand_right.png);
    background-position: top right 3%;
  }
  /* form container */
  .p-form-container {
    --max-width: 910px;
    display: block;
    max-width: var(--max-width);
    margin-inline: auto;
  }
  /* info group */
  .p-info-group {
    display: block;
    padding-block: calc(2 * var(--space-unit));
    padding-inline: calc(2.5 * var(--space-unit));
    background-color: color-mix(in srgb, var(--color--theme-line), #fff 70%);
    border-radius: 2px;
    line-height: 1.5;
    letter-spacing: 0.125em;
  }
  .p-info-group__title {
    text-align: center;
    padding-block-end: calc(1 * var(--space-unit));
    border-bottom: solid 2px color-mix(in srgb, var(--color--theme-line), #000 30%);
  }
  .p-info-group__note {
    font-size: var(--font-size--s);
    padding-block-start: calc(1.5 * var(--space-unit));
  }
  .p-info-group__dl {
    display: grid;
    grid-template-columns: minmax(auto, 25%) 1fr;
    gap: calc(5 * var(--to-space-unit)) calc(1 * var(--space-unit));
    padding-block-start: calc(2 * var(--space-unit));
  }
  .p-info-group__dl > dt {
    font-weight: var(--font-weight--normal);
  }
  .p-info-group a {
    color: var(--color--theme-link);
  }
  .p-info-group a[href] {
    text-decoration: underline;
  }
  /* hover */
}
@layer vendor {
  /* other of origin */
  .anchor-area {
    padding: 2em calc(10 * var(--to-space-unit));
  }
  .anchor-area a.btn-anchor {
    text-decoration: underline;
  }
  .anchor-area ul > li {
    padding: 0 2em;
  }
  .text-right {
    text-align: right;
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: calc(5 * var(--to-space-unit));
  }
  .flex-x {
    display: flex;
    flex-wrap: wrap;
    gap: calc(5 * var(--to-space-unit));
  }
  .flex-y {
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--to-space-unit));
  }
  .flex-x > label, .flex-y > label {
    display: flex;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    margin-right: calc(16 * var(--to-space-unit));
  }
  .flex-x > label:has(+ div input) {
    margin-right: calc(5 * var(--to-space-unit));
  }
  .flex-x > label > input {
    align-self: start;
    min-width: 1.5em;
  }
  .flex-x > label + hr {
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
  }
  .list-wrapper {
    margin: calc(5 * var(--to-space-unit));
  }
  .section-item {
    margin: 0 calc(10 * var(--to-space-unit)) calc(20 * var(--to-space-unit));
    padding: 0;
  }
  .item-content {
    padding: calc(5 * var(--to-space-unit)) calc(4 * var(--to-space-unit));
    overflow-wrap: anywhere;
    line-height: 1.75;
  }
  .input-fixed {
    display: flex;
  }
  .al {
    text-align: left;
  }
  .ar {
    text-align: right;
  }
  .ac {
    text-align: center !important;
  }
  /* sunnyimg */
  .sunnyimg-container {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .sunnyimg-container-button {
    display: flex;
    justify-content: flex-start;
    padding: 0 0 5px 0;
  }
  .sunnyimg-container-drop-zone {
    border: 1px dotted;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .sunnyimg-container-drop-zone img {
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
    width: 100%;
    height: 100%;
  }
  .sunnyimg-container-drop-zone p {
    text-align: center;
    width: 100%;
  }
  .sunnyfile-container {
    display: flex;
    align-items: center;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .sunnyfile-container-button {
    display: flex;
    justify-content: flex-start;
    padding: 0;
  }
  .sunnyfile-container-button > label {
    display: inline-block;
  }
  .sunnyfile-container-drop-zone {
    flex: 1;
    border: 1px dotted;
    align-self: stretch;
    display: flex;
  }
  .sunnyfile-container-drop-zone > p {
    align-self: center;
    margin: 0 8px;
    width: 100%;
  }
  .sunnyfile-container-drop-zone > p > a {
    text-decoration: underline;
  }
  /* sunny sortable */
  .sunnysortable {
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .sunnysortable .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .sunnysortable .row .cell {
    background-color: ghostwhite;
    border: #333333 1px solid; /*境界線を指定*/
    align-self: stretch;
    padding: 10px; /*余白を指定*/
    margin-left: -1px;
    margin-top: -1px;
  }
  /* sunny select */
  .sunnyselect-container {
    padding: 0 !important;
  }
  .sunnyselect {
    border: 1px solid #bbb;
    border-radius: 4px;
    height: 2.2em;
    background-color: #fafafa;
    padding: 0 !important;
    text-align: left;
    box-sizing: border-box;
    cursor: default;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
  }
  .sunnyselect::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 100%;
    pointer-events: none;
    background: #4d4d4d;
  }
  .sunnyselect::after {
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    right: 9px;
    width: 8px;
    height: 4px;
    margin-top: -1px;
    pointer-events: none;
    background: #fff;
    clip-path: polygon(0px 0px, 100% 0px, 50% 100%);
  }
  .sunnyselect-content {
    padding: 8px 10px;
    margin-right: 35px;
  }
  .sunnyselect-list-container {
    background-color: #fff;
    border: solid 1px #bbb;
    position: absolute;
    display: flex;
    flex-flow: column;
    z-index: 999;
  }
  .sunnyselect-list-search-area {
    background-color: #fff;
    border-left: solid 1px #bbb;
    border-right: solid 1px #bbb;
    border-top: solid 1px #bbb;
    border-bottom: solid 2px #bbb;
    padding: 10px;
  }
  .sunnyselect-input-search {
    background-color: #fff;
    width: 100%;
    display: inline-block;
    padding: 5px;
    border: 1px solid #bbbbbb;
    box-sizing: border-box;
  }
  .sunnyselect-list-area {
    background-color: #fff;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
    flex: 1;
  }
  .sunnyselect-list-item {
    border-bottom: solid 1px #bbb;
    padding: 10px;
    overflow-wrap: break-word;
    cursor: pointer;
  }
  .sunnyselect-list-item:last-child {
    border-bottom: none;
  }
  .sunnyselect-list-item:hover {
    background-color: #afeeee;
  }
  .sunnyselect-list-item-selected {
    background-color: #b0e0e6; /* f5fffa*/
  }
  .sunnyselect-multiple .sunnyselect-list-item {
    padding: 10px 10px 10px 30px;
    position: relative;
  }
  .sunnyselect-multiple .sunnyselect-list-item > input {
    position: absolute;
    top: 12px;
    left: 10px;
  }
  .sunnyselect-multiple .sunnyselect {
    white-space: normal;
    height: auto;
    min-height: 2.2em;
  }
  .sunnyselect-icon .sunnyselect-list-item {
    padding: 10px 10px 10px 40px;
    position: relative;
  }
  .sunnyselect-icon .sunnyselect-list-item > div:nth-child(2) {
    position: absolute;
    top: 7px;
    left: 10px;
    width: 24px;
    height: 24px;
  }
}
@layer utilities {
  /* link */
  a.link {
    color: var(--color--theme-link);
  }
  a.link[href] {
    text-decoration: underline;
  }
  /* hover */
  /* text-align */
  .text-align\:center {
    text-align: center;
  }
  .text-align\:left {
    text-align: left;
  }
  .text-align\:right {
    text-align: right;
  }
  /* vertical-align */
  .vertical-align\:middle {
    vertical-align: middle;
  }
  .vertical-align\:top {
    vertical-align: top;
  }
  .vertical-align\:bottom {
    vertical-align: bottom;
  }
  .vertical-align\:baseline {
    vertical-align: baseline;
  }
  /* line-height */
  .line-height\:1 {
    line-height: 1;
  }
  .line-height\:1\.5 {
    line-height: 1.5;
  }
  .line-height\:1\.75 {
    line-height: 1.75;
  }
  .line-height\:2 {
    line-height: 2;
  }
  /* margin-top */
  .mt\:0 {
    margin-top: 0 !important;
  }
  .mt\:1px {
    margin-top: calc(1 * var(--to-space-unit));
  }
  .mt\:2px {
    margin-top: calc(2 * var(--to-space-unit));
  }
  .mt\:3px {
    margin-top: calc(3 * var(--to-space-unit));
  }
  .mt\:5px {
    margin-top: calc(5 * var(--to-space-unit));
  }
  .mt\:10px {
    margin-top: calc(10 * var(--to-space-unit));
  }
  .mt\:1 {
    margin-top: calc(1 * var(--space-unit));
  }
  .mt\:2 {
    margin-top: calc(2 * var(--space-unit));
  }
  .mt\:3 {
    margin-top: calc(3 * var(--space-unit));
  }
  .mt\:4 {
    margin-top: calc(4 * var(--space-unit));
  }
  .mt\:5 {
    margin-top: calc(5 * var(--space-unit));
  }
  .mt\:6 {
    margin-top: calc(6 * var(--space-unit));
  }
  /* margin-bottom */
  .mb\:0 {
    margin-bottom: 0 !important;
  }
  .mb\:1px {
    margin-bottom: calc(1 * var(--to-space-unit));
  }
  .mb\:2px {
    margin-bottom: calc(2 * var(--to-space-unit));
  }
  .mb\:3px {
    margin-bottom: calc(3 * var(--to-space-unit));
  }
  .mb\:5px {
    margin-bottom: calc(5 * var(--to-space-unit));
  }
  .mb\:10px {
    margin-bottom: calc(10 * var(--to-space-unit));
  }
  .mb\:1 {
    margin-bottom: calc(1 * var(--space-unit));
  }
  .mb\:2 {
    margin-bottom: calc(2 * var(--space-unit));
  }
  .mb\:3 {
    margin-bottom: calc(3 * var(--space-unit));
  }
  .mb\:4 {
    margin-bottom: calc(4 * var(--space-unit));
  }
  .mb\:5 {
    margin-bottom: calc(5 * var(--space-unit));
  }
  .mb\:6 {
    margin-bottom: calc(6 * var(--space-unit));
  }
  /* margin-left */
  .ml\:auto {
    margin-left: auto !important;
  }
  .ml\:0 {
    margin-left: 0 !important;
  }
  .ml\:1px {
    margin-left: calc(1 * var(--to-space-unit));
  }
  .ml\:2px {
    margin-left: calc(2 * var(--to-space-unit));
  }
  .ml\:3px {
    margin-left: calc(3 * var(--to-space-unit));
  }
  .ml\:5px {
    margin-left: calc(5 * var(--to-space-unit));
  }
  .ml\:10px {
    margin-left: calc(10 * var(--to-space-unit));
  }
  .ml\:1 {
    margin-left: calc(1 * var(--space-unit));
  }
  .ml\:2 {
    margin-left: calc(2 * var(--space-unit));
  }
  .ml\:3 {
    margin-left: calc(3 * var(--space-unit));
  }
  .ml\:4 {
    margin-left: calc(4 * var(--space-unit));
  }
  .ml\:5 {
    margin-left: calc(5 * var(--space-unit));
  }
  .ml\:6 {
    margin-left: calc(6 * var(--space-unit));
  }
  /* margin-right */
  .mr\:auto {
    margin-right: auto !important;
  }
  .mr\:0 {
    margin-right: 0 !important;
  }
  .mr\:1px {
    margin-right: calc(1 * var(--to-space-unit));
  }
  .mr\:2px {
    margin-right: calc(2 * var(--to-space-unit));
  }
  .mr\:3px {
    margin-right: calc(3 * var(--to-space-unit));
  }
  .mr\:5px {
    margin-right: calc(5 * var(--to-space-unit));
  }
  .mr\:10px {
    margin-right: calc(10 * var(--to-space-unit));
  }
  .mr\:1 {
    margin-right: calc(1 * var(--space-unit));
  }
  .mr\:2 {
    margin-right: calc(2 * var(--space-unit));
  }
  .mr\:3 {
    margin-right: calc(3 * var(--space-unit));
  }
  .mr\:4 {
    margin-right: calc(4 * var(--space-unit));
  }
  .mr\:5 {
    margin-right: calc(5 * var(--space-unit));
  }
  .mr\:6 {
    margin-right: calc(6 * var(--space-unit));
  }
  /* width */
  .width\:0 {
    width: 0;
  }
  .width\:auto {
    width: auto;
  }
  .width\:100\% {
    width: 100%;
  }
  .width\:50\% {
    width: 50%;
  }
  .width\:fit-content {
    width: -moz-fit-content;
    width: fit-content;
  }
  .width\:100px {
    width: 100px;
  }
  .width\:200px {
    width: 200px;
  }
  .width\:300px {
    width: 300px;
  }
  .width\:400px {
    width: 400px;
  }
  .width\:500px {
    width: 500px;
  }
  .width\:600px {
    width: 600px;
  }
  .width\:700px {
    width: 700px;
  }
  .width\:800px {
    width: 800px;
  }
  .width\:900px {
    width: 900px;
  }
  .width\:1000px {
    width: 1000px;
  }
  /* max-width */
  .max-width\:100px {
    max-width: 100px;
  }
  .max-width\:200px {
    max-width: 200px;
  }
  .max-width\:300px {
    max-width: 300px;
  }
  .max-width\:400px {
    max-width: 400px;
  }
  .max-width\:500px {
    max-width: 500px;
  }
  .max-width\:600px {
    max-width: 600px;
  }
  .max-width\:700px {
    max-width: 700px;
  }
  .max-width\:800px {
    max-width: 800px;
  }
  .max-width\:900px {
    max-width: 900px;
  }
  .max-width\:1000px {
    max-width: 1000px;
  }
  .max-width\:100\% {
    max-width: 100%;
  }
  /* display */
  .\:inline {
    display: inline !important;
  }
  .\:inline-block {
    display: inline-block !important;
  }
  .\:block {
    display: block !important;
  }
  .\:flex {
    display: flex !important;
  }
  /* flex */
  .align-items\:stretch {
    align-items: stretch !important;
  }
  .align-items\:center {
    align-items: center !important;
  }
  .align-items\:flex-start {
    align-items: flex-start !important;
  }
  .align-items\:flex-end {
    align-items: flex-end !important;
  }
  .justify-content\:center {
    justify-content: center !important;
  }
  .justify-content\:space-around {
    justify-content: space-around !important;
  }
  .justify-content\:space-between {
    justify-content: space-between !important;
  }
  .justify-content\:space-evenly {
    justify-content: space-evenly !important;
  }
  .flex-wrap\:wrap {
    flex-wrap: wrap;
  }
  .flex-wrap\:nowrap {
    flex-wrap: nowrap;
  }
  .flex-direction\:column {
    flex-direction: column;
  }
  /* color */
  .word-break\:normal {
    word-break: normal;
  }
  .word-break\:break-all {
    word-break: break-all;
  }
  .word-break\:keep-all {
    word-break: keep-all;
  }
  .white-space\:normal {
    white-space: normal;
  }
  .white-space\:nowrap {
    white-space: nowrap;
  }
  .white-space\:wrap {
    white-space: wrap;
  }
  /* color */
  .color\:text {
    color: var(--color--text);
  }
  .color\:text-invert {
    color: var(--color--text-invert);
  }
  .color\:white {
    color: white;
  }
  .color\:black {
    color: black;
  }
  .color\:gray {
    color: gray;
  }
  .color\:em {
    color: var(--color--theme-em);
  }
  /* display */
}
@media (min-width: 0px) and (max-width: 768px){
    .u-pc {
      display: none;
    }
}
@media (min-width: 768px){
    .u-sp {
      display: none;
    }
}
@media (min-width: 769px){
    .p-ms-sp {
      display: none !important;
    }
    .p-ms-header {
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
    }
    .p-ms-header__logo {
      display: block;
      grid-column: 1/2;
      grid-row: 1/2;
      height: calc(65 * var(--to-space-unit));
    }
    .p-ms-header__btns {
      display: flex;
      grid-column: 2/-1;
      grid-row: 1/2;
      margin-left: auto;
    }
    .p-ms-header__nav {
      display: block;
      grid-column: 1/-1;
      grid-row: 2/-1;
      margin-left: auto;
      opacity: 1;
    }
    .p-ms-header__nav > ul {
      display: flex;
    }
    .p-ms-header__nav > ul > li {
      display: block;
    }
    .p-ms-header__nav > ul > li:not(:first-child) {
      border-left: solid calc(2 * var(--to-space-unit)) var(--color--theme-line);
    }
    .p-ms-header__nav > ul > li > a {
      padding: 0.5em 1em;
      border-bottom: solid calc(4 * var(--to-space-unit)) transparent;
      font-weight: var(--font-weight--bold);
      text-box: trim-both cap alphabetic;
      color: var(--color--text);
      transition: color ease var(--transition-time), border ease var(--transition-time);
    }
    .p-ms-header__nav > ul > li > ul {
      --top-space: calc(30 * var(--to-space-unit));
      display: none;
      position: absolute;
      margin-top: var(--top-space);
      padding: calc(12 * var(--to-space-unit)) calc(15 * var(--to-space-unit));
      background-color: var(--color--theme-bg);
      border-radius: var(--radius--m);
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
    }
    .p-ms-header__nav > ul > li > ul::before {
      content: "";
      display: block;
      position: absolute;
      top: -0.5em;
      left: 2em;
      width: 1em;
      height: 1em;
      background-color: var(--color--theme-bg);
      transform: rotate(45deg);
    }
    .p-ms-header__nav > ul > li > ul::after {
      content: "";
      display: block;
      position: absolute;
      top: calc(-1 * var(--top-space));
      left: 0;
      right: 0;
      height: var(--top-space);
    }
    .p-ms-header__nav > ul > li > ul > li > a {
      display: block;
      padding: 0.5em 1em;
      border-left: solid calc(4 * var(--to-space-unit)) transparent;
      font-weight: var(--font-weight--bold);
      text-box: trim-both cap alphabetic;
      transition: border ease var(--transition-time);
    }
    .p-ms-header__nav > ul > li > ul > li:not(:first-child) {
      border-top: solid calc(2 * var(--to-space-unit)) var(--color--theme-line);
    }
    .p-ms-header__btns > li:not(:last-child) {
      margin-right: calc(10 * var(--to-space-unit));
    }
    .p-ms-header__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.25em;
      padding: 0.75em 1em;
      border: 1px solid transparent;
      border-radius: var(--radius--xl);
      background-color: #ccc;
      font-size: calc(14 * var(--to-space-unit));
      font-weight: var(--font-weight--bold);
      text-box: trim-both cap alphabetic;
      color: var(--color--text-invert);
      transition: opacity ease var(--transition-time);
    }
    .p-ms-header__btn img {
      width: 1.5em;
    }
    .p-ms-header__btn--login {
      background-color: #A3D900;
    }
    .p-ms-header__btn--favorite {
      background-color: #00A7FF;
    }
    .p-ms-header__hamburger,
    .p-ms-header__bg {
      display: none;
    }
    .p-ms-footer__container {
      grid-template-columns: 1fr auto;
    }
    .p-ms-footer__nav {
      grid-column: 1/2;
      grid-row: 1/1;
    }
    .p-ms-footer__nav li {
      font-size: calc(14 * var(--to-rem));
    }
    .p-ms-footer__information {
      grid-column: 2/-1;
      grid-row: 1/1;
    }
    .p-ms-footer__logo {
      max-width: calc(150 * var(--to-rem));
    }
    .p-ms-footer__address {
      font-size: calc(14 * var(--to-rem));
    }
    .p-ms-footer__address .s-br {
      display: block;
    }
    .p-ms-footer__copyright {
      padding-block: 2.5em;
      font-size: calc(15 * var(--to-rem));
    }
}
@media (min-width: 769px) and (any-hover: hover){
    .p-ms-header__nav > ul > li > a:hover {
      color: color-mix(in srgb, var(--color--text), #fff 30%);
      border-bottom-color: #00A7FF;
    }
    .p-ms-header__btn:hover {
      opacity: 0.75;
    }
    .p-ms-header__nav > ul > li:hover > ul {
      display: block;
    }
    .p-ms-header__nav > ul > li > ul > li > a:hover {
      border-left-color: #00A7FF;
    }
}
@media (min-width: 1000px){
    .p-ms-footer__nav li {
      font-size: calc(15 * var(--to-rem));
    }
    .p-ms-footer__address {
      font-size: calc(15 * var(--to-rem));
    }
    .p-ms-footer__address .s-br {
      display: none;
    }
}
@media (max-width: 1000px){
    .side-menu {
      width: auto;
    }
    .side-menu dt {
      grid-template-columns: auto;
      justify-items: center;
      row-gap: 0.25rem;
      padding-inline: calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 0.5);
      text-align: center;
    }
    .side-menu dt > a {
      font-size: calc(12 * var(--to-rem));
    }
    .side-menu .unread-badge {
      --badge-size: calc(16 * var(--to-rem));
      right: calc(var(--space-unit) * 0.5);
    }
    .side-menu .p-side-button {
      font-size: calc(12 * var(--to-rem));
    }
    .list-table th {
      overflow: visible;
      white-space: normal;
      text-overflow: clip;
    }
}
@media screen and (max-width: 1000px){
    .header .right-area .header-nav ul li {
      max-width: 380px;
      min-width: 2em;
    }
    .header .right-area .header-nav ul li a {
      font-size: calc(12 * var(--to-rem));
      padding-inline: calc(var(--space-unit) * 2);
    }
}
@media screen and (max-width: 840px){
    .header {
      height: calc(var(--header-height) * 0.75);
    }
    .header .right-area .header-nav ul li a {
      min-width: 1rem;
      font-size: 0;
    }
}
@media (max-width: 768px){
    body:has(.body-no-scroll-when-checked-sm:checked) {
      overflow: hidden;
    }
    body:has(.body-no-scroll-when-checked-sm:checked) *:focus-visible {
      visibility: hidden;
    }
    .content-wrapper:has(.side-menu--upper-sp) {
      flex-direction: column;
    }
    .side-menu dt a {
      font-size: 0;
    }
    .side-menu dt img {
      display: block;
      min-width: calc(var(--space-unit) * 3);
    }
    .side-menu .unread-badge {
      --badge-size: calc(10 * var(--to-rem));
      font-size: 0;
      padding-inline: 0;
      right: calc(var(--space-unit) * 0.5);
    }
    .side-menu__other {
      max-width: 3em;
    }
    .side-menu--upper-sp {
      flex-direction: row;
      justify-content: space-between;
      height: auto;
      padding-block-end: 0;
      z-index: var(--z-index--side-menu);
    }
    .side-menu--upper-sp .side-menu__other {
      max-width: none;
      margin-block: auto;
      margin-inline: auto calc(3 * var(--to-rem));
    }
    .side-menu--upper-sp .side-menu__main {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
    }
    .side-menu--upper-sp dt {
      grid-template-columns: auto 1fr;
      border-right: 1px solid var(--color--theme-line);
    }
    .side-menu--upper-sp dt a {
      font-size: calc(12 * var(--to-rem));
    }
    .side-menu--upper-sp dt img {
      display: none;
    }
    .side-menu--upper-sp .p-side-button {
      width: 100%;
      margin-inline: 0;
    }
    .side-menu--upper-sp dt:has(.unread-badge) {
      padding-block: calc(var(--space-unit) * 0.8);
    }
    .side-menu--upper-sp .unread-badge {
      top: calc(3 * var(--to-rem));
      right: calc(1 * var(--to-rem));
    }
    .p-scroll-table {
      overflow: auto; /*tableをスクロールさせる*/
      overscroll-behavior-inline: contain;
      white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
      margin-top: calc(20 * var(--to-space-unit));
    }
    .p-scroll-table::before {
      content: "※表全体は、横にスクロールして見られます";
      display: block;
      position: sticky;
      left: 0;
      font-size: calc(12 * var(--to-rem));
      color: var(--color--theme-em);
    }
    .p-scroll-table > table {
      width: 1000px !important;
    }
    dl.data-group1 {
      display: block;
    }
    dl.data-group1 > dt {
      display: block;
      max-width: none;
      padding-bottom: 0;
    }
    dl.data-group1 > dt .required {
      align-self: flex-start;
    }
    dl.data-group1 > dt img + .required {
      margin-left: 1rem;
    }
    dl.data-group1 > dt label,
    dl.data-group1 > dt .label {
      width: 100%;
      margin-right: 0.5rem;
    }
    dl.data-group1 > dt:has(+ dd dl.data-group1) {
      width: auto;
      padding-bottom: calc(5 * var(--to-space-unit));
      border-right: none;
    }
    dl.data-group1 > dd > dl.data-group1 > dt {
      width: auto;
      max-width: 100%;
    }
    dl.data-group1-2 {
      width: 100%;
    }
    dl.data-group1 > .dt-sm-none {
      display: none;
    }
    dl.data-group1 > dd {
      display: block;
      padding-block: calc(10 * var(--to-space-unit)) calc(20 * var(--to-space-unit));
    }
    dl.data-group1 > dd > dl.data-group1:has(> dt) {
      flex-wrap: wrap;
    }
    dl.data-group1 > dt.__dummy {
      display: none;
    }
    dl.data-group3 > dt {
      width: 8em;
    }
    .chatblock dl.data-group1 > dt,
    .detailblock dl.data-group1 > dt {
      width: auto;
      border-right: none;
    }
    .chatblock dl.data-group1 > dd,
    .detailblock dl.data-group1 > dd {
      padding-block: calc(10 * var(--to-space-unit));
    }
    dl.data-group1 > dd .chatblock {
      padding-top: calc(20 * var(--to-space-unit));
    }
    .p-page-title {
      font-size: calc(21 * var(--to-rem));
    }
    .p-ms-pc {
      display: none !important;
    }
    .p-ms-header {
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: auto 1fr;
      width: 100%;
      max-width: 100%;
      padding-inline: calc(1 * var(--space-unit));
      margin-inline: auto;
      padding-block: calc(1 * var(--space-unit)) calc(1 * var(--space-unit));
    }
    .p-ms-header__logo {
      display: block;
      grid-column: 2/3;
      grid-row: 1/2;
      height: min(100 * var(--to-rem), 25vw);
    }
    .p-ms-header__btns {
      display: none;
    }
    .p-ms-header__bg {
      display: block;
      flex: 1;
      background-color: transparent;
    }
    .p-ms-header__nav {
      pointer-events: none;
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      z-index: var(--z-index--header-nav);
      opacity: 0;
      transform: translateY(-100dvh);
      transition: transform ease var(--transition-time), opacity ease var(--transition-time);
    }
    .p-ms-header__nav > ul {
      flex: 0 0 auto;
      max-height: 100svh;
      overflow-y: scroll;
      background-color: var(--color--theme-bg);
      font-size: calc(14 * var(--to-rem));
    }
    .p-ms-header__nav li > a {
      display: block;
      color: var(--color--text);
      padding: calc(15 * var(--to-space-unit)) calc(1 * var(--space-unit));
      border-bottom: solid 1px var(--color--theme-line);
      transition: background-color ease var(--transition-time);
    }
    .p-ms-header__nav > ul ul > li > a {
      padding-inline-start: calc(30 * var(--to-space-unit));
    }
    .p-ms-header__nav > ul ul > li > a::before {
      content: "-";
      display: inline;
      margin-right: 0.5em;
    }
    .p-ms-header__hamburger {
      cursor: pointer;
      display: block;
      position: fixed;
      right: calc(0.5 * var(--space-unit));
      top: calc(1 * var(--space-unit));
      aspect-ratio: 1/1;
      width: min(60 * var(--to-space-unit), 18vw);
      z-index: calc(var(--z-index--header-nav) + 1);
      background-color: var(--color--theme-bg);
      border: solid 1px transparent;
      border-radius: var(--radius--xs);
      text-align: center;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0666666667);
    }
    .p-ms-header__hamburger i {
      display: block;
      position: absolute;
      left: 15%;
      right: 15%;
      top: 50%;
      border: solid 1px var(--color--text);
      opacity: 1;
      transition: transform ease var(--transition-time), opacity ease var(--transition-time);
    }
    .p-ms-header__hamburger i:nth-child(1) {
      transform: translateY(calc(-15 * var(--to-space-unit) - 50%));
    }
    .p-ms-header__hamburger i:nth-child(2) {
      transform: translateY(-50%);
    }
    .p-ms-header__hamburger i:nth-child(3) {
      transform: translateY(calc(15 * var(--to-space-unit) - 50%));
    }
    :checked + * .p-ms-header__nav {
      pointer-events: auto;
      opacity: 1;
      transform: translateY(0);
    }
    :checked + * .p-ms-header__hamburger i:nth-child(1) {
      transform: translateY(-50%) rotate(-45deg);
    }
    :checked + * .p-ms-header__hamburger i:nth-child(2) {
      opacity: 0;
      transform: translateY(-50%);
    }
    :checked + * .p-ms-header__hamburger i:nth-child(3) {
      transform: translateY(-50%) rotate(45deg);
    }
    :checked + * .p-ms-header__bg {
      background-color: rgba(0, 0, 0, 0.2666666667);
    }
    .p-ms-footer__container {
      padding-block: calc(4 * var(--space-unit));
    }
    .p-ms-footer__nav {
      display: none;
    }
    .p-ms-footer__logo {
      max-width: calc(150 * var(--to-rem));
    }
    .p-ms-footer__address {
      font-size: calc(14 * var(--to-rem));
    }
    .p-ms-footer__copyright {
      padding-block: 2.5em;
      font-size: calc(10 * var(--to-rem));
    }
}
@media (max-width: 768px) and (any-hover: hover){
    .p-ms-header__nav li > a[href]:hover {
      background-color: color-mix(in srgb, var(--color--theme-bg), #000 5%);
    }
}
@media screen and (max-width: 768px){
    :where(:root) {
      --space-unit: calc(10 * var(--to-rem));
    }
    .p-header--simple {
      height: calc(80 * var(--to-rem));
    }
    .section-title {
      flex-wrap: wrap;
      margin-bottom: 0.25em;
    }
    .section-title h2 {
      flex: 1 0 100%;
    }
    .section-title > div {
      margin-left: auto;
    }
    .item-area-center {
      flex-wrap: wrap;
      justify-content: space-around !important;
    }
    .item-area-center > * {
      margin-bottom: 1em;
    }
    .item-area-center > .spacer {
      display: none;
    }
    .item-area-center > .right:has(.button-delete) {
      width: 100%;
      margin-right: auto;
    }
    .button-delete {
      font-size: 0.75em;
      margin-top: 0.5em;
    }
    .pager-container .prev,
    .pager-container .next {
      display: none;
    }
    .p-content-header__icon {
      width: max(10vw, 60px);
    }
    .p-content-header--has-person::before {
      --height: min(40vw, 218 * var(--to-space-unit));
      left: 50%;
      bottom: calc(-0.35 * var(--height));
      width: 100%;
      background-image: url(../img/main-site/h1_bg_left_sp.png), url(../img/main-site/h1_bg_right_sp.png);
    }
    .p-content-header--has-person + .section-normal::before,
    .p-content-header--has-person + .section-rounded::before,
    .p-content-header--has-person + .section-normal::after,
    .p-content-header--has-person + .section-rounded::after {
      display: none;
    }
    .p-info-group {
      padding-inline: calc(1 * var(--space-unit));
    }
    .p-info-group__dl {
      grid-template-columns: auto;
      gap: 0;
    }
    .p-info-group__dl > dt:not(:first-child) {
      margin-top: calc(1 * var(--space-unit));
    }
    .p-info-group__dl > dd {
      padding-inline-start: calc(16 * var(--to-space-unit));
    }
    .p-info-group__dl > dt.__dummy {
      display: none;
    }
}
@media screen and (max-width: 580px){
    .header__title,
    :where(.header .left-area .logo) a::after {
      font-size: calc(16 * var(--to-rem));
      padding-inline: 1em;
    }
    .header .right-area .header-nav ul li a {
      padding-inline: calc(var(--space-unit) * 1);
    }
}
@media screen and (max-width: 480px){
    .p-header--simple {
      height: calc(60 * var(--to-rem));
    }
}
@media (max-width: 400px){
    .list-table th {
      width: 1%;
      overflow-x: hidden;
    }
    .list-table td {
      width: 1%;
    }
}
@media screen and (max-width: 400px){
    button.btn-default {
      min-width: auto;
      padding-inline: 0.25rem;
    }
}
@media (any-hover: hover){
    .header .right-area .header-nav ul li:hover {
      text-decoration: underline;
    }
    .side-menu a:hover {
      text-decoration: underline;
    }
    .section-title > div > button:hover {
      background-color: color-mix(in srgb, var(--color--text-invert), var(--color--theme-bg-title) 5%);
      text-decoration: underline;
    }
    :where(.section-content a[href]:hover) {
      color: color-mix(in srgb, var(--color--theme-link), #fff 25%);
    }
    .pagination > li > a:hover {
      text-decoration: underline;
    }
    button.btn-default:not(:disabled):hover,
    .button-white:not(:disabled):hover,
    .button-area > button.icon:not(:disabled):hover,
    .button-textbox:not(:disabled):hover,
    .button-confirm:hover,
    .button-delete:hover,
    .button-normal:hover,
    .button-safe:hover,
    .button-attention:hover,
    .icon-button:hover,
    .button-orange:hover,
    .p-side-button:hover {
      background-color: color-mix(in srgb, var(--bg-color), #000 var(--hover-dark-per));
      text-decoration: underline;
    }
    .p-ms-hover:hover {
      opacity: 0.75;
    }
    .p-ms-footer a:hover {
      opacity: 0.75;
    }
    .p-ms-breadcrumb a:hover {
      opacity: 0.75;
    }
    .p-info-group a[href] {
      color: color-mix(in srgb, var(--color--theme-link), #000 15%);
    }
    a.link[href] {
      color: color-mix(in srgb, var(--color--theme-link), #000 15%);
    }
}
@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 (pointer: fine), (hover: hover){
    a[href^="tel:"].u-tel {
      pointer-events: none;
    }
}
@media print{
    :where(mark) {
      /*
      * 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;
      border-style: dotted;
    }
}