@charset "UTF-8"; /*! TAK's Custom Base.css v1.3.4 | MIT License | github.com/tak-dcxi/taks-custom-base-css */ /* ====================================================== // // MARK: # TAK's Custom Base.css // Made by TAK - https: //www.tak-dcxi.com/ // This CSS is built based on Normalize.css. (https: //necolas.github.io/normalize.css/) // It aims to normalize styles for better cross-browser compatibility, remove default browser styling, and enhance usability and accessibility for all users." // // ====================================================== */ /* ====================================================== // MARK: ## Universal // ------------------------------------------------------ */ *, ::before, ::after { /* Ensure padding and borders are included within the dimensions of the element. */ -webkit-box-sizing: border-box; box-sizing: border-box; /* Prevent inline elements from extending beyond their container's bounds. */ min-inline-size: 0; /* Remove any default borders. */ border-width: 0; /* Set a default border style of solid for easy border additions. */ border-style: solid; } /* ====================================================== // MARK: ## Document and Body Elements // ------------------------------------------------------ */ :where(:root, body) { /* Prevent scrolling along the inline axis (usually horizontal) for root and body. */ overflow-inline: clip; } @supports not (overflow-inline: clip) { :where(:root, body) { /* Prevent horizontal scrolling for root and body in browsers that don't support `overflow-inline`. */ overflow-x: clip; } } :where(:root) { /* Specify a safe font-family for the default Gothic typeface. */ font-family: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif; /* Normalize font-style. */ font-style: unset; /* Normalize font-style. */ font-weight: 400; /* From an accessibility perspective, the line spacing within a paragraph should be at least 1.5 times the text size. (https://waic.jp/translations/WCAG21/#visual-presentation) */ line-height: 1.5; /* Align text to the start of the element, accommodating left-to-right and right-to-left languages. */ text-align: start; /* Remove leading white space for a cleaner text alignment. */ text-spacing-trim: trim-start; /* Use the browser's default method to determine word breaking. */ word-break: initial; /* Apply strict line breaking rules to enhance readability in languages that require it. */ line-break: strict; /* Allow long words to be broken and wrapped at any point to prevent overflow. */ overflow-wrap: anywhere; /* Automatically insert hyphens where appropriate for better text flow and alignment. */ -ms-hyphens: auto; hyphens: auto; /* Prevent mobile browsers from scaling text sizes automatically. */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* Preventing the layout shift caused by scrollbars. */ scrollbar-gutter: stable; /* Allow animations and transitions of intrinsic sizing keywords. */ interpolate-size: allow-keywords; /* Eliminate the tap highlight color on mobile devices for a cleaner interface. */ -webkit-tap-highlight-color: transparent; } :where(:root):has(:where(:modal)) { /* Prevent scrolling of the document when a modal is open. */ overflow: hidden; } :where(body) { /* Ensures the body element occupies at least 100% of the viewport's block size. */ min-block-size: 100svb; /* Reset default margin. */ margin: unset; } /* ====================================================== // MARK: ## Custom Properties // ------------------------------------------------------ */ /* ------------------------------------------------------ // MARK: ### colors */ /* Define a custom property to use as a background color that remains visible in forced colors mode. This is useful when using `background-color: currentColor` as a foreground color, such as in pseudo-elements. Example usage: ``` .button::after { content: ''; justify-self: end; mask-image: url(...); inline-size: 1em; aspect-ratio: 1; background-color: var(--background-current); color: red; } */ @property --background-current { syntax: "currentColor | CanvasText"; inherits: true; initial-value: currentColor; } @media (forced-colors: active) { :where(:root) { /* Set the default background color to the forced color mode background. */ --background-current: CanvasText; } } /* ------------------------------------------------------ // MARK: ### easing function */ @property --ease-in-sine { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.47, 0, 0.745, 0.715); } @property --ease-out-sine { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.39, 0.575, 0.565, 1); } @property --ease-in-out-sine { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.445, 0.05, 0.55, 0.95); } @property --ease-in-quad { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.55, 0.085, 0.68, 0.53); } @property --ease-out-quad { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.25, 0.46, 0.45, 0.94); } @property --ease-in-out-quad { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @property --ease-in-cubic { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.55, 0.055, 0.675, 0.19); } @property --ease-out-cubic { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.215, 0.61, 0.355, 1); } @property --ease-in-out-cubic { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.645, 0.045, 0.355, 1); } @property --ease-in-quart { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.895, 0.03, 0.685, 0.22); } @property --ease-out-quart { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.165, 0.84, 0.44, 1); } @property --ease-in-out-quart { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.77, 0, 0.175, 1); } @property --ease-in-quint { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.755, 0.05, 0.855, 0.06); } @property --ease-out-quint { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.23, 1, 0.32, 1); } @property --ease-in-out-quint { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.86, 0, 0.07, 1); } @property --ease-in-expo { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.95, 0.05, 0.795, 0.035); } @property --ease-out-expo { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.19, 1, 0.22, 1); } @property --ease-in-out-expo { syntax: "*"; inherits: false; initial-value: cubic-bezier(1, 0, 0, 1); } @property --ease-in-circ { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.6, 0.04, 0.98, 0.335); } @property --ease-out-circ { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.075, 0.82, 0.165, 1); } @property --ease-in-out-circ { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.785, 0.135, 0.15, 0.86); } @property --ease-in-back { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.6, -0.28, 0.735, 0.045); } @property --ease-out-back { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.175, 0.885, 0.32, 1.275); } @property --ease-in-out-back { syntax: "*"; inherits: false; initial-value: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* ------------------------------------------------------ // MARK: ### triangle shapes */ /* Example usage: ``` .tooltip::after { --_size: 16px; content: ''; position: absolute; inset-inline: 0; inset-block-start: 100%; clip-path: var(--shape-triangle-bottom); inline-size: var(--_size); block-size: calc(var(--_size) / 2 * tan(60deg)); margin-inline: auto; background-color: inherit; } ``` */ @property --shape-triangle-top { syntax: "*"; inherits: false; initial-value: polygon(50% 0, 100% 100%, 0 100%); } @property --shape-triangle-bottom { syntax: "*"; inherits: false; initial-value: polygon(0 0, 100% 0, 50% 100%); } @property --shape-triangle-right { syntax: "*"; inherits: false; initial-value: polygon(0 0, 100% 50%, 0 100%); } @property --shape-triangle-left { syntax: "*"; inherits: false; initial-value: polygon(0 50%, 100% 0, 100% 100%); } @property --shape-triangle-lower-left { syntax: "*"; inherits: false; initial-value: polygon(0 0, 100% 100%, 0 100%); } @property --shape-triangle-upper-left { syntax: "*"; inherits: false; initial-value: polygon(0 0, 100% 0, 0 100%); } @property --shape-triangle-lower-right { syntax: "*"; inherits: false; initial-value: polygon(100% 0, 100% 100%, 0 100%); } @property --shape-triangle-upper-right { syntax: "*"; inherits: false; initial-value: polygon(0 0, 100% 0, 100% 100%); } /* ------------------------------------------------------ // MARK: ### chevron icons */ /* The chevron icon is borrowed from Basicons (https://basicons.xyz/). Example usage: ``` .button::after { content: ''; justify-self: end; mask-image: var(--icon-chevron-right); inline-size: 1em; aspect-ratio: 1; background-color: var(--background-current); } ``` */ /* single chevron icons */ @property --icon-chevron-up { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevron-right { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevron-down { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevron-left { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } /* double chevron icons */ @property --icon-chevrons-up { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevrons-right { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevrons-down { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } @property --icon-chevrons-left { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } /* ------------------------------------------------------ // MARK: ### launch link icon */ /* The chevron icon is borrowed from Basicons (https://basicons.xyz/). Example usage: ``` .button[target="_blank"]::after { content: '' / '別ウインドウで開きます'; justify-self: end; mask-image: var(--icon-launch-link); inline-size: 1em; aspect-ratio: 1; background-color: var(--background-current); } ``` */ @property --icon-launch-link { syntax: ""; inherits: false; initial-value: url('data:image/svg+xml,'); } /* ------------------------------------------------------ // MARK: ### leading trim */ /* You can use the `--leading-trim` custom property to adjust the vertical spacing of text elements. This helps in achieving more consistent and visually pleasing typography across different languages and font styles. @see https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable Example usage: ``` p { margin-block: var(--leading-trim); } .button { padding-block: calc(1.5em + var(--leading-trim)); } ``` */ @property --leading-trim { syntax: "*"; inherits: false; initial-value: calc((1em - 1lh) / 2); } :where(:lang(en)) { /* This ensures that the vertical space is evenly distributed, improving the visual balance of text. */ --leading-trim: calc((1cap - 1lh) / 2); } /* ------------------------------------------------------ // MARK: ### hover state */ /* You can use these custom properties to easily switch between hover and non-hover styles. The var() function will use the first non-empty value, allowing you to define both states in one line. Example usage: ``` .button { --_background-lighten: var(--is-hover-false, 0%) var(--is-hover-true, 20%); background-color: color-mix(in sRGB, var(--background-button), #fff var(--_background-lighten)); } ``` */ :where(:-moz-any-link, :enabled, summary) { /* Define custom properties for hover state on interactive elements. Default state: `--is-hover-true` is empty, `--is-hover-false` has a value. */ --is-hover-true: ; --is-hover-false: initial; } :where(:any-link, :enabled, summary) { /* Define custom properties for hover state on interactive elements. Default state: `--is-hover-true` is empty, `--is-hover-false` has a value. */ --is-hover-true: ; --is-hover-false: initial; } @media (any-hover: hover) { :where(:-moz-any-link, :enabled, summary):where(:hover) { /* Set hover state for actual hover, but only on devices that support hover. Hover state: `--is-hover-true` has a value, `--is-hover-false` is empty. */ --is-hover-true: initial; --is-hover-false: ; } :where(:any-link, :enabled, summary):where(:hover) { /* Set hover state for actual hover, but only on devices that support hover. Hover state: `--is-hover-true` has a value, `--is-hover-false` is empty. */ --is-hover-true: initial; --is-hover-false: ; } } :where(:-moz-any-link, :enabled, summary):where(:focus-visible) { /* Set hover state for focus-visible state. Focus-visible state: `--is-hover-true` has a value, `--is-hover-false` is empty. */ --is-hover-true: initial; --is-hover-false: ; } :where(:any-link, :enabled, summary):where(:focus-visible) { /* Set hover state for focus-visible state. Focus-visible state: `--is-hover-true` has a value, `--is-hover-false` is empty. */ --is-hover-true: initial; --is-hover-false: ; } /* ====================================================== // MARK: ## Sections // ------------------------------------------------------ */ :where(h1, h2, h3, h4, h5, h6) { /* Reset default margin. */ margin-block: unset; /* Reset default font-size. */ font-size: unset; } :where(search) { /* Render the `search` element consistently. */ display: block flow; } /* ====================================================== // MARK: ## Grouping content // ------------------------------------------------------ */ :where(p, blockquote, figure, pre, address, ul, ol, dl) { /* Reset default margin-block. */ margin-block: unset; } :where(blockquote, figure) { /* Reset default margin-inline. */ margin-inline: unset; } :where(address):where(:lang(ja)) { /* Reset font style for specific Japanese language elements. */ font-style: unset; } :where(ul, ol) { /* Remove default padding-inline-start. */ -webkit-padding-start: unset; padding-inline-start: unset; /* In Safari, using 'list-style: none' causes the list not to be announced by screen readers, so use 'list-style-type: ""' to hide markers without affecting accessibility. */ list-style-type: ""; } :where(dt) { /* Make definition terms bolder. */ font-weight: 700; } :where(dd) { /* Remove default indentation. */ -webkit-margin-start: unset; margin-inline-start: unset; } :where(hr) { /* Sets the thickness of the top border of the
element to 1px. */ border-block-start-width: 1px; } :where(pre) { /* Sets the tab character width to 2 spaces for better readability in preformatted text. */ -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } @media print { :where(pre) { /* Allow text within 
 elements to wrap when printing. */
    white-space: pre-wrap;
  }
}

/* ======================================================
// MARK: ## Text-level semantics
// ------------------------------------------------------ */
:where(b, strong) {
  /* Enhance the weight of bold elements for emphasis. */
  font-weight: 700;
}

:where(em):where(:lang(ja)) {
  /* Enhance the weight of bold elements for emphasis. */
  font-weight: 700;
}

:where(i, cite, em, dfn, var):where(:lang(ja)) {
  /* Reset font style for specific Japanese language elements. */
  font-style: unset;
}

:where(small) {
  /* Set the font size to 1em (same as the parent element). */
  font-size: 1em;
  /* Set the font weight to 400. */
  font-weight: 400;
}

:where(code, kbd, samp) {
  /* Set the monospace font using Tailwind as a reference(@see https://tailwindcss.com/docs/font-family). Specifying 'serif' is a countermeasure for Chrome's 13px issue. */
  font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", serif;
  /* Reset font size to ensure consistent appearance across different devices. */
  font-size: unset;
}

:where(cite, dfn) {
  --_quotation-start: "“";
  --_quotation-end: "”";
}
:where(cite, dfn)::before {
  /* Inserts an opening quotation mark before the content of  and  elements, defaulting to a double quote unless overridden. */
  content: var(--_quotation-start);
}
:where(cite, dfn)::after {
  /* Inserts a closing quotation mark after the content of  and  elements, defaulting to a double quote unless overridden. */
  content: var(--_quotation-end);
}
:where(cite, dfn):where(:lang(ja)) {
  /* Overrides the default opening quotation mark with the Japanese opening quote for  and  elements in Japanese. */
  --_quotation-start: "「";
  --_quotation-end: "」";
}

:where(var) {
  /* Sets the font family to serif for  elements, enhancing the typographic distinction of variable names in technical content. */
  font-family: serif;
}
:where(var):where(:lang(ja)) {
  /* Resets the font family for  elements in Japanese content. */
  font-family: unset;
}

@media (forced-colors: none) {
  :where(mark) {
    /* Remove any default background colors. */
    background-color: unset;
    /* Reset text color to default or inherited value. */
    color: unset;
    /* Applies an underline to the text to highlight it. */
    text-decoration-line: underline;
    /* Sets the color of the underline using a mix of the 'Mark' color and transparency. */
    text-decoration-color: oklch(from #ff0 l c h/50%);
    /* Specifies the thickness of the underline. */
    text-decoration-thickness: 0.4em;
    /* Adjusts the position of the underline closer to the text. */
    text-underline-offset: -0.2em;
    /* Ensures the underline is not broken by descenders in characters like g, j, p, q, and y. */
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
}

/* ======================================================
// MARK: ## Links
// ------------------------------------------------------ */
:where(:-moz-any-link) {
  /* Remove any default background colors. */
  background-color: unset;
  /* Reset text color to default or inherited value. */
  color: unset;
  /* Remove underline from links. */
  text-decoration-line: none;
  /* Set the thickness of the text decoration based on the font metrics. */
  text-decoration-thickness: from-font;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.25em;
  /* Adjust underline to skip over descenders for better readability. */
  text-decoration-skip-ink: auto;
}
:where(:any-link) {
  /* Remove any default background colors. */
  background-color: unset;
  /* Reset text color to default or inherited value. */
  color: unset;
  /* Remove underline from links. */
  text-decoration-line: none;
  /* Set the thickness of the text decoration based on the font metrics. */
  text-decoration-thickness: from-font;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.25em;
  /* Adjust underline to skip over descenders for better readability. */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* ======================================================
// MARK: ## Edits
// ------------------------------------------------------ */
:where(ins):not(:where(.adsbygoogle)) {
  /* Use a dashed line for underlining inserted content, making it distinctly visible. */
  text-decoration-style: dashed;
  /* Position the underline slightly away from the text for enhanced legibility. */
  text-underline-offset: 0.4em;
  /* Adjust underline to skip over descenders for better readability. */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

:where(del) {
  /* Apply a double line through the text for deleted content, enhancing visibility. */
  text-decoration-style: double;
}

/* ======================================================
// MARK: ## Embedded content
// ------------------------------------------------------ */
:where(img, picture, svg, video, canvas, audio, iframe, embed, object) {
  /* Set elements to display as block-level flow containers, suitable for complex layouts. */
  display: inline-block;
  /* Limits the maximum size inline to prevent overflow. */
  max-inline-size: 100%;
  /* Automatically adjusts the block size based on content. */
  block-size: auto;
  vertical-align: bottom;
}

/* ======================================================
// MARK: ## Tabular data
// ------------------------------------------------------ */
:where(table) {
  /* Collapses border for a more compact table design. */
  border-collapse: collapse;
}

:where(caption) {
  /* Aligns the caption text to the start of the element. */
  text-align: start;
}

:where(td, th) {
  /* Removes default padding from table cells and headers. */
  padding: unset;
  /* Aligns content of table cells to the top. */
  vertical-align: top;
}

:where(th) {
  /* Makes table header text bold. */
  font-weight: 700;
  /* Aligns header text to the start of the cell. */
  text-align: start;
}

/* ======================================================
// MARK: ## Forms
// ------------------------------------------------------ */
::-webkit-file-upload-button {
  /* Remove default padding. */
  padding: unset;
  /* Apply a transparent border for forced colors mode. */
  border: 1px solid transparent;
  /* Resets border-radius to default. */
  border-radius: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Removes default text color. */
  color: unset;
  /* Resets font settings to inherit from parent. */
  font: unset;
  /* Centers the element vertically within its line box. */
  vertical-align: middle;
  /* Resets letter-spacing to default. */
  letter-spacing: unset;
  /* Resets text alignment to default. */
  text-align: unset;
  /* Resets text transformation to default. */
  text-transform: unset;
}
:where(button, input, select, textarea),
::file-selector-button {
  /* Remove default padding. */
  padding: unset;
  /* Apply a transparent border for forced colors mode. */
  border: 1px solid transparent;
  /* Resets border-radius to default. */
  border-radius: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Removes default text color. */
  color: unset;
  /* Resets font settings to inherit from parent. */
  font: unset;
  /* Centers the element vertically within its line box. */
  vertical-align: middle;
  /* Resets letter-spacing to default. */
  letter-spacing: unset;
  /* Resets text alignment to default. */
  text-align: unset;
  /* Resets text transformation to default. */
  text-transform: unset;
}

:where([type=radio i], [type=checkbox i]) {
  /* Remove default margin. */
  margin: unset;
}

:where([type=file i]) {
  /* Default cursor for file input fields. */
  cursor: unset;
}

:where(textarea) {
  /* Remove default margin in Firefox. */
  margin-block: unset;
  /* Allows resizing of textarea vertically only. */
  resize: block;
}

::-webkit-file-upload-button {
  /* Set the inline-size of the button to match the content's inline-size exactly. */
  inline-size: -webkit-fit-content;
  inline-size: fit-content;
  /* Optimizes touch interaction for buttons. */
  touch-action: manipulation;
}

:where(button),
::file-selector-button {
  /* Set the inline-size of the button to match the content's inline-size exactly. */
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  /* Optimizes touch interaction for buttons. */
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

:where(button)::-moz-focus-inner {
  /* Remove the inner padding in Firefox. */
  padding: unset;
}

::-webkit-file-upload-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(button, label[for], select, [role=tab], [role=button], [role=option]),
::file-selector-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(select):where(:disabled) {
  /* Keep the opacity of disabled selects consistent with other disabled elements. */
  opacity: inherit;
}

:where(fieldset) {
  /* Remove default margin-inline. */
  margin-inline: unset;
  /* Remove default padding. */
  padding: unset;
}

:where(legend) {
  /* Remove default padding-inline. */
  padding-inline: unset;
}

:where(optgroup) {
  /* Resets font settings to inherit from parent. */
  font: unset;
}

::-webkit-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::-moz-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

:-ms-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::-ms-input-placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::placeholder {
  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
  opacity: unset;
}

::picker(select) {
  /* Render the `: :picker(select)` pseudo element consistently. */
  display: block flow;
  /* Remove default padding. */
  padding: unset;
}

/* ======================================================
// MARK: ## Interactive elements
// ------------------------------------------------------ */
:where(summary) {
  /* Eliminate the default marker from details summary for a cleaner disclosure widget. */
  display: block flow;
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

::-webkit-details-marker {
  /* Hide the default disclosure marker to allow for custom styling. */
  display: none;
}

:where(dialog, [popover]) {
  /* Resets overflow property. */
  overflow: unset;
  /* Resets the inline size property. */
  inline-size: unset;
  /* Resets the block size property. */
  block-size: unset;
  /* Resets the max inline size limit. */
  max-inline-size: unset;
  /* Resets the max block size limit. */
  max-block-size: unset;
  /* Removes default padding. */
  padding: unset;
  /* Removes default background color. */
  background-color: unset;
  /* Resets color to default. */
  color: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /* Hide the dialog element and popover element when it is not open. */
  display: none !important;
}

::-ms-backdrop {
  /* Remove default backdrop color for a clearer view of the underlying content. */
  background-color: unset;
}

::backdrop {
  /* Remove default backdrop color for a clearer view of the underlying content. */
  background-color: unset;
}

/* ======================================================
// MARK: ## Focus styles
// ------------------------------------------------------ */
:where(:-moz-focusring) {
  /* Improve outlines for Firefox and unify style with input elements and buttons. */
  outline: auto;
}

:where(:focus-visible) {
  /* Slightly offset focus outline for better visibility without overlapping text. */
  outline-offset: 2px;
}

:where(:focus):not(:where(:focus-visible)) {
  /* Hide focus outline unless element is explicitly focus-visible to reduce visual clutter. */
  outline: none;
}

[tabindex="-1"]:focus-visible {
  /* Ensure that programmatically focused elements do not show an outline unless they are naturally focusable. */
  outline: none !important;
}

/* ======================================================
// MARK: ## Misc
// ------------------------------------------------------ */
:where(:disabled, [aria-disabled=true]) {
  /* Show default cursor for disabled elements to reflect their non-interactive state. */
  cursor: default;
}

[hidden]:not([hidden=until-found]) {
  /* Ensure elements intended to be hidden are not displayed, enhancing clarity and layout control. */
  display: none !important;
}

/* ======================================================
// MARK: ## Reduced Motion
// ------------------------------------------------------ */
/* Target all elements that don't have the 'data-safe-animation' attribute. */
@media (prefers-reduced-motion: reduce) {
  :not([data-safe-animation])::-ms-backdrop {
    /* Disable animations and transitions for users who prefer reduced motion. */
    background-attachment: unset !important;
    scroll-behavior: unset !important;
    transition-delay: unset !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: unset !important;
    animation-iteration-count: unset !important;
    view-transition-name: none !important;
  }
  :not([data-safe-animation]), :not([data-safe-animation])::before, :not([data-safe-animation])::after, :not([data-safe-animation])::backdrop {
    /* Disable animations and transitions for users who prefer reduced motion. */
    background-attachment: unset !important;
    scroll-behavior: unset !important;
    -webkit-transition-delay: unset !important;
            transition-delay: unset !important;
    -webkit-transition-duration: 1ms !important;
            transition-duration: 1ms !important;
    -webkit-animation-duration: 1ms !important;
            animation-duration: 1ms !important;
    -webkit-animation-delay: unset !important;
            animation-delay: unset !important;
    -webkit-animation-iteration-count: unset !important;
            animation-iteration-count: unset !important;
    view-transition-name: none !important;
  }
}

/* ======================================================
// MARK: ## Utility Classes
// ------------------------------------------------------ */
/* Create a pseudo-element to adjust the vertical space above and below an element. */
.leading-trim::before, .leading-trim::after {
  content: "";
  display: block flow;
  inline-size: 0;
  block-size: 1px;
}
.leading-trim::before {
  -webkit-margin-after: var(--leading-trim);
          margin-block-end: var(--leading-trim);
}
.leading-trim::after {
  -webkit-margin-before: var(--leading-trim);
          margin-block-start: var(--leading-trim);
}

/* Hide content visually but keep it accessible to screen readers. */
.visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  contain: strict !important;
  visibility: initial !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  margin: unset !important;
  padding: unset !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

:root {
  --focus: var(--c_accent);
}

.p_fv-stage,
.c_pagehead,
.l_band-dark,
.l_gnav {
  --focus: var(--c_accent_ondark);
}

:focus-visible {
  outline: 2px solid var(--focus);
}

html {
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  min-width: 375px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

button {
  outline: none;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

::-moz-selection {
  background: rgba(20, 23, 26, 0.14);
}

::selection {
  background: rgba(20, 23, 26, 0.14);
}

.p_fv-stage ::-moz-selection, .c_pagehead ::-moz-selection, .l_band-dark ::-moz-selection, .l_gnav ::-moz-selection {
  background: rgba(242, 243, 244, 0.24);
}

.p_fv-stage ::selection,
.c_pagehead ::selection,
.l_band-dark ::selection,
.l_gnav ::selection {
  background: rgba(242, 243, 244, 0.24);
}

ul,
ol {
  list-style: none;
}

.l_header {
  position: relative;
  height: var(--hdr_height);
  background: var(--c_paper);
  border-bottom: 1px solid var(--line);
  z-index: 99;
}
@media screen and (min-width: 1024px) {
  .l_header {
    display: none;
  }
}
.l_header .l_header__inner {
  height: var(--hdr_height);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.l_header .l_header__brand {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.l_header .l_header__brand img {
  display: block;
  width: auto;
  height: 40px;
}
@media screen and (max-width: 480px) {
  .l_header .l_header__brand img {
    height: 30px;
  }
}

/* ---------- 固定メニューボタン（ハンバーガー↔×） ---------- */
.l_gnav-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 12px;
  z-index: 10000;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--ink);
  border: 0;
  border-radius: 12px;
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.l_gnav-btn.is-open {
  background: rgba(255, 255, 255, 0.16);
}
.l_gnav-btn__bars {
  position: relative;
  width: 22px;
  height: 12px;
}
.l_gnav-btn__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}
.l_gnav-btn__bars span:nth-child(1) {
  top: 0;
}
.l_gnav-btn__bars span:nth-child(2) {
  bottom: 0;
}
.l_gnav-btn.is-open .l_gnav-btn__bars span:nth-child(1) {
  -webkit-transform: translateY(5px) rotate(45deg);
          transform: translateY(5px) rotate(45deg);
}
.l_gnav-btn.is-open .l_gnav-btn__bars span:nth-child(2) {
  -webkit-transform: translateY(-5px) rotate(-45deg);
          transform: translateY(-5px) rotate(-45deg);
}

.l_gnav {
  --gnav_bg: linear-gradient(160deg, #1a2230 0%, #10141b 100%);
  --gnav_fg: #fff;
  --gnav_fg_mute: rgba(255, 255, 255, 0.72);
  --gnav_label: rgba(255, 255, 255, 0.45);
  --gnav_line: rgba(255, 255, 255, 0.1);
  --gnav_line2: rgba(255, 255, 255, 0.18);
  --gnav_current: var(--c_accent_ondark);
  --gnav_other_bg: rgba(255, 255, 255, 0.04);
  --gnav_tick: rgba(255, 255, 255, 0.4);
}
.l_gnav__bg {
  position: absolute;
  inset: 0;
  background: var(--gnav_bg);
}
.l_gnav__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  padding: 0px 22px 56px;
  color: var(--gnav_fg_mute);
}
.l_gnav__brand {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 76px;
}
.l_gnav__brand img {
  display: block;
  width: auto;
  height: 30px;
}
.l_gnav {
  /* ---------- セクション見出し ---------- */
}
.l_gnav__sec + .l_gnav__sec {
  margin-top: 30px;
}
.l_gnav__label {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gnav_label);
}
.l_gnav {
  /* ---------- CTA（バナー c_hbanner を縦積みで再利用。暗背景なので既定のまま使える） ---------- */
}
.l_gnav .c_hbanners {
  grid-template-columns: 1fr;
  max-width: none;
  margin-top: 0;
  gap: 10px;
}

/* ---------- 通常ナビ ---------- */
.l_gnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l_gnav-item {
  border-top: 1px solid var(--gnav_line);
}
.l_gnav-item:last-child {
  border-bottom: 1px solid var(--gnav_line);
}
.l_gnav-item.is-open .l_gnav-toggle::after {
  opacity: 0;
}
.l_gnav-item.is-open .l_gnav-sub {
  grid-template-rows: 1fr;
}

.l_gnav-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.l_gnav-row > a {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: block;
  padding: 15px 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gnav_fg);
}
.l_gnav-row > a.is-current {
  color: var(--gnav_current);
}

.l_gnav-toggle {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  position: relative;
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  cursor: pointer;
}
.l_gnav-toggle::before, .l_gnav-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--gnav_fg_mute);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.l_gnav-toggle::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}

.l_gnav-sub {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), -ms-grid-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.l_gnav-sub > div {
  overflow: hidden;
}
.l_gnav-sub ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
}
.l_gnav-sub a {
  display: block;
  position: relative;
  padding: 9px 2px 9px 18px;
  font-size: 14px;
  color: var(--gnav_fg_mute);
}
.l_gnav-sub a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 7px;
  height: 1px;
  background: var(--gnav_tick);
}

/* ---------- その他（横並び・小さめ） ---------- */
.l_gnav-other {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.l_gnav-other a {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--gnav_line2);
  border-radius: 10px;
  background: var(--gnav_other_bg);
  font-size: 13px;
  color: var(--gnav_fg_mute);
}
.l_gnav-other a.is-current {
  border-color: var(--gnav_current);
  color: var(--gnav_current);
}

/* ---------- SNS（アイコンのみ）は component/_c_sns.scss（.c_sns）に共通化。
   暗背景用の上書きもそちら側に置いている ---------- */
@media screen and (max-width: 1023px) {
  html.is-navopen,
  html.is-navopen body {
    overflow: hidden;
  }
  .l_gnav-btn {
    right: 12px;
  }
  /* ---------- 全画面パネル（円クリップで開閉） ---------- */
  .l_gnav {
    position: fixed;
    inset: 0;
    z-index: 9990;
    clip-path: circle(0px at calc(100% - 12px - 26px) 38px);
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s;
    transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.5s;
  }
  .l_gnav.is-open {
    clip-path: circle(150% at calc(100% - 12px - 26px) 38px);
    visibility: visible;
    pointer-events: auto;
    -webkit-transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
    transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
  }
  .l_gnav__panel {
    opacity: 0;
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
    -webkit-transition: opacity 0.3s ease 0.16s, -webkit-transform 0.3s ease 0.16s;
    transition: opacity 0.3s ease 0.16s, -webkit-transform 0.3s ease 0.16s;
    transition: opacity 0.3s ease 0.16s, transform 0.3s ease 0.16s;
    transition: opacity 0.3s ease 0.16s, transform 0.3s ease 0.16s, -webkit-transform 0.3s ease 0.16s;
  }
  .l_gnav.is-open .l_gnav__panel {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@media screen and (min-width: 1024px) {
  .l_gnav-btn {
    left: calc(var(--content_offset) - 52px - 12px);
    -webkit-transition: background 0.3s ease, left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transition: background 0.3s ease, left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  html.is-navclosed .l_gnav-btn {
    left: 12px;
  }
  .l_gnav {
    --gnav_line: transparent;
    --gnav_line2: transparent;
    --gnav_other_bg: transparent;
    --gnav_tick: transparent;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar_width);
    z-index: 40;
    -webkit-transition: visibility 0s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transition: visibility 0s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .l_gnav.is-closed {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: visibility 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transition: visibility 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.4s;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .l_gnav__panel {
    padding: 0px 22px 40px;
  }
  .l_gnav__sec + .l_gnav__sec {
    margin-top: 26px;
  }
  /* ---------- 通常ナビ：極太見出し → 素の小さいテキストへ ---------- */
  .l_gnav-row > a {
    padding: 8px 2px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
  }
  .l_gnav-row > a:hover {
    color: var(--gnav_current);
  }
  .l_gnav-toggle {
    width: 32px;
    height: 32px;
  }
  .l_gnav-toggle::before, .l_gnav-toggle::after {
    width: 9px;
  }
  .l_gnav-sub a {
    padding: 6px 2px 6px 12px;
    font-size: 13px;
  }
  .l_gnav-sub a::before {
    display: none;
  }
  .l_gnav-sub a:hover {
    color: var(--gnav_current);
  }
  /* ---------- その他：囲みピル → 素のテキストリンク ---------- */
  .l_gnav-other {
    gap: 16px;
  }
  .l_gnav-other a {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    text-align: left;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
  }
  .l_gnav-other a:hover {
    color: var(--gnav_current);
  }
  /* ---------- SNS：囲み丸 → 素のアイコン ---------- */
  .l_gnav .c_sns {
    gap: 8px;
  }
  .l_gnav .c_sns a {
    width: 30px;
    height: 30px;
    border: 0;
  }
  .l_gnav .c_sns a:hover {
    background: none;
    color: var(--gnav_current);
  }
  .l_gnav .c_sns svg {
    width: 18px;
    height: 18px;
  }
  /* ---------- CTA バナー：静かな中で唯一の存在感。周りが静まった分そぎ落とす ---------- */
  .l_gnav .c_hbanner {
    padding: 12px 14px;
    gap: 10px;
  }
  .l_gnav .c_hbanner::after {
    display: none;
  }
  .l_gnav .c_hbanner__sub {
    font-size: 10.5px;
  }
  .l_gnav .c_hbanner__title {
    font-size: 13.5px;
  }
  .l_gnav .c_hbanner__icon {
    width: 24px;
    height: 24px;
  }
  .l_gnav .c_hbanner__icon::after {
    width: 5px;
    height: 9px;
  }
  /* ---------- 本文とフッターをサイドバーの分だけ右へ逃がす ----------
     margin で逃がすので、サイドバーとの重なりも隙間も原理的に発生しない。
     --content_offset はサイドバーを閉じると 0 になる（style.scss / html.is-navclosed）ので、
     閉＝本文が全幅に広がる。サイドバー自身の width は --sidebar_width のままで潰れない。
     ※ .l_header は PC では display:none なので含めない（ロゴはサイドバー最上部にある）。
     ※