@charset "UTF-8";
html {
  font-size: 100%;
}
@media screen and (width < 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (width >= 768px) and (width < 1200px) {
  html {
    font-size: 1.4285714286vw;
  }
}

a[href^=tel] {
  text-decoration: none;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* 強調をなくす */
}

a:hover {
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
  cursor: pointer;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

:focus:not(:focus-visible) {
  outline: none;
}

input[type=text] {
  font-size: 1rem;
  /* = 16px */
}

textarea {
  field-sizing: content;
}

body {
  font-family: var(--base-font-family);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.body-wrapper {
  position: relative;
  overflow: clip;
  background-image: image-set(url("../images/bg_upper.EWqlpuFV.avif") type("image/avif"), url("../images/bg_upper.WXDE15MQ.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: left calc(50% - 23px) top -85px;
  background-size: min(152.7086383602vw, 2086px);
}
@media screen and (width <= 767px) {
  .body-wrapper {
    background-image: image-set(url("../images/bg_upper_sp.CF4OAPZR.avif") type("image/avif"), url("../images/bg_upper_sp.viE2vjjo.png") type("image/png"));
    background-position: left calc(50% - 10px) top -3px;
    background-size: min(185.8666666667vw, 697px);
  }
}

.body-wrapper::before {
  position: absolute;
  inset: 0;
  z-index: -10;
  content: "";
  background-color: #ededed;
}

/*! kiso.css v1.2.4 | 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%;
  text-size-adjust: 100%;
  /*
  * Prevents layout shift caused by the appearance or disappearance of the scrollbar.
  * Starting with Chrome 145, specifying `scrollbar-gutter: stable` will cause vw to be calculated without considering the scrollbar, which will also prevent horizontal scrolling.
  */
  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(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
  /* 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;
}

@media print {
  :where(pre) {
    /* Prevent text wrapping in print media. */
    text-wrap-mode: unset;
  }
}
/* ======================================================
//  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):lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(u, s, del, ins) {
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

: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;
  text-decoration-inset: auto;
  cursor: help;
}

:where(time) {
  /* Set to `no-autospace` because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}

@media (forced-colors: active) {
  :where(mark) {
    /*
    * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
    */
    background-color: Highlight;
    color: HighlightText;
  }
}
@media print {
  :where(mark) {
    /*
    * 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;
  }
}
/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a) {
  /*
  * The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}

:where(a:any-link) {
  /*
  * 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;
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
  /* 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(img, svg, picture, video, canvas, model, iframe, embed, object) {
  /*
  * Automatically adjust block size based on content.
  * Exclude the <audio> element as it disappears when block-size is auto.
  * @see https://github.com/tak-dcxi/kiso.css/issues/5
  */
  block-size: auto;
}

: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:lang(en)) {
  /* 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(: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;
}

::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/30%);
}

: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;
}

html {
  box-sizing: border-box;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  tab-size: 4;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

*,
::before,
::after {
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
     # General elements
     # ================================================================= */
hr {
  /* Show the overflow in Edge and IE */
  height: 0;
  overflow: visible;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */
}

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  border-bottom: none;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  border-color: inherit;
  /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
     # Forms
     # ================================================================= */
input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  appearance: textfield;
  appearance: none;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
  appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
input,
select,
textarea {
  appearance: none;
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  appearance: none;
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentcolor;
  /* Internet Explorer 11+ */
}

legend {
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  border: 0;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  font: inherit;
  color: inherit;
  /* Correct the inability to style clickable types in iOS and Safari */
  appearance: button;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
     # Specify media element style
     # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
     # Accessibility
     # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
  list-style: "";
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSansJP-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NotoSansJP-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/NotoSansJP-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSansJP-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/NotoSansJP-Black.woff") format("woff");
  font-display: swap;
}
:root {
  /* inner */
  --inner: min(1200px, 100%);
  --padding-inner: 1.5625rem;
  /* z-index */
  --z-index-header: 900;
  /* color */
  --color-white: #fff;
  --color-black: #1d1d1d;
  --color-text: #000;
  --color-gray: #ededed;
  --color-yellow: #fdb006;
  --color-sky: #00aae7;
  --color-dream: #fdd806;
  --color-work: #3bdeff;
  --color-tag02: #369bbf;
  /* font-weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  /* font-family */
  --base-font-family: "Noto Sans JP", sans-serif;
  /* transition duration */
  --duration: 0.2s;
  /* header height */
  --header-height: 5rem;
}
@media screen and (max-width: 767px) {
  :root {
    --inner: min(31.25rem, 100%);
    --padding-inner: 1.25rem;
  }
}
@media screen and (width < 768px) {
  :root {
    --header-height: 3.35875rem;
  }
}

.faq-layout {
  margin-block-start: -3.6875rem;
}

.inner {
  max-width: calc(var(--inner) + var(--padding-inner) * 2);
  padding-inline: var(--padding-inner);
  margin-inline: auto;
}

/* ---------- 読み込み時のチラつき防止 | ここから ---------- */
.js-fadeIn-up-single {
  opacity: 0;
}

/* ---------- 読み込み時のチラつき防止 | ここまで ---------- */
/* ---------- マスク系指定 | ここから ---------- */
.js-mask,
.js-fv-mask {
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: 200% 0%;
  mask-size: 200% 100%;
}

.js-mask.is-open,
.js-fv-mask.is-open {
  animation: mask 0.5s linear forwards;
}

@keyframes mask {
  0% {
    mask-position: 200% 0%;
  }
  100% {
    mask-position: 0% 0%;
  }
}
/* ---------- マスク系指定 | ここまで ---------- */
/* ---------- クリップパス系指定 | ここから ---------- */
.js-clip-path-left {
  clip-path: inset(0 100% 0 0);
}

.js-clip-path-left.is-open {
  animation: clip-reveal-left 0.3s linear forwards;
}

.js-clip-path-right {
  clip-path: inset(0 0 0 100%);
}

.js-clip-path-right.is-open {
  animation: clip-reveal-right 0.5s linear forwards;
}

@keyframes clip-reveal-left {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clip-reveal-right {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
/* ---------- クリップパス系指定 | ここまで ---------- */
/* アニメーション軽減設定のユーザー向け対応 */
@media (prefers-reduced-motion: reduce) {
  .js-fadeIn-up-single,
  .js-mask,
  .js-fv-mask,
  .js-clip-path-left,
  .js-clip-path-right {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.button {
  position: relative;
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  padding-block: 0.5625rem;
  padding-inline: 1.4375rem 0.9375rem;
  overflow: hidden;
  background: linear-gradient(90deg, #ea6593, #ec0299);
  filter: drop-shadow(0.25rem 0.25rem 0 oklch(from var(--color-black) l c h/20%));
  isolation: isolate;
  border: 1px solid var(--color-white);
  border-radius: 0.625rem;
}

.button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, #ffab23, #f29600);
  transition: transform var(--duration) ease-out;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (any-hover: hover) {
  .button:hover::before {
    transform: scaleX(1);
  }
}
.button__text {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.1875;
  color: var(--color-white);
}

.button__icon {
  display: block;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("../images/icon_external_link.BqAuuEHu.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ========================================
  Entry Button
======================================== */
.entry-button {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 2.1875rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 27.9375rem;
  padding-block: 1.6875rem;
  padding-inline: 1.25rem;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-dream);
  filter: drop-shadow(0.25rem 0.25rem 0 oklch(from var(--color-black) l c h/20%));
  isolation: isolate;
  border: 1px solid var(--color-white);
  border-radius: 0.625rem;
}
@media screen and (max-width: 767px) {
  .entry-button {
    gap: 2rem;
    width: 100%;
    max-width: 18rem;
    padding-block: 1.375rem;
    padding-inline: 0.625rem;
  }
}

.entry-button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, #fff, #eee);
  transition: transform var(--duration) ease-out;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (any-hover: hover) {
  .entry-button:hover::before {
    transform: scaleX(1);
  }
}
.entry-button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.entry-button__text {
  font-size: max(1.5rem, 12px);
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  color: var(--color-black);
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .entry-button__text {
    font-size: max(0.9375rem, 12px);
  }
}

.entry-button__icon {
  display: block;
  width: 1.0625rem;
  aspect-ratio: 1/1;
  background-image: url("../images/icon_pink_link.Dy_k9Fa6.svg");
  background-position: center;
  background-size: contain;
}

.cta {
  display: none;
}
@media screen and (max-width: 767px) {
  .cta {
    position: absolute;
    inset: min(131cqi, 40.625rem) auto auto 50%;
    z-index: 800;
    display: block;
    width: max-content;
    transform: translateX(-50%);
  }
}

.cta--fixed {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  will-change: opacity, transform;
  transform: translate3d(0, 0.75rem, 0);
}
@media screen and (max-width: 767px) {
  .cta--fixed {
    right: 50%;
    transition: opacity 0.3s, transform 0.3s;
    transform: translate3d(50%, 0.625rem, 0);
  }
}

.cta--fixed.is-show {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.5s, transform 0.5s;
  transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 767px) {
  .cta--fixed.is-show {
    transform: translate3d(50%, 0, 0);
  }
}

.cta__pc {
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.5rem;
  height: 11.5rem;
  overflow: hidden;
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: 1.1818181818;
  color: var(--color-white);
  letter-spacing: 0;
  background: linear-gradient(90deg, #ea6593 0%, #ec0299 100%);
  border: 1px solid var(--color-white);
  border-radius: 100vh;
  transition: scale 0.3s;
}
.cta__pc::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, #ffab23, #f29600);
  transition: transform var(--duration) ease-out;
  transform: scaleX(0);
  transform-origin: left center;
}
.cta__pc::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10.625rem;
  height: 10.625rem;
  pointer-events: none;
  content: "";
  background-image: image-set(url("../images/cta_text.DfyOPGCZ.avif") type("image/avif"), url("../images/cta_text.BSseoeVm.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
  animation: rotate-loop 16s linear infinite;
}

@media (any-hover: hover) {
  .cta__pc:hover {
    scale: 0.95;
  }
  .cta__pc:hover::before {
    transform: scaleX(1);
  }
}
@keyframes rotate-loop {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.cta__sp {
  width: 102%;
  height: 3.4375rem;
}

.cta__sp .button {
  width: max-content;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.cta__sp .button::after {
  order: -1;
  width: 1.9375rem;
  height: 0.875rem;
  content: "";
  background-image: image-set(url("../images/icon_arrow.C6QQuhcP.avif") type("image/avif"), url("../images/icon_arrow.i1wdq2XZ.png") type("image/png.png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cta__sp .button .button__icon {
  display: flex;
  align-items: center;
  width: 4rem;
  background-position: left center;
}
.cta__sp .button .button__icon::after {
  display: block;
  order: -1;
  width: 1.9375rem;
  height: 0.875rem;
  margin-left: auto;
  content: "";
  background-image: image-set(url("../images/icon_arrow.C6QQuhcP.avif") type("image/avif"), url("../images/icon_arrow.i1wdq2XZ.png") type("image/png.png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  rotate: 180deg;
}

.interview-card__inner {
  display: grid;
  grid-template-columns: min(32.2108345534vw, 27.5rem) 1fr;
  gap: 1.875rem;
  align-items: center;
  padding-inline: 3.5rem;
}
@media screen and (max-width: 767px) {
  .interview-card__inner {
    grid-template-columns: 1fr;
    gap: 1.375rem;
    padding-inline: 1.875rem;
  }
}

.interview-item:nth-child(2n) .interview-card__inner {
  direction: rtl;
}
.interview-item:nth-child(2n) .interview-card__content {
  direction: ltr;
}

.interview-card__img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 440/280;
  overflow: hidden;
  border-radius: 1.875rem;
}
.interview-card__img::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-color: var(--color-sky);
  transform: translateX(-101%);
}

.interview-card.is-img-wipe .interview-card__img::before {
  animation: image-wipe 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes image-wipe {
  0% {
    transform: translateX(-101%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}
.interview-card__img iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.interview-card__title {
  display: inline;
  padding-block: 0.375rem;
  padding-inline: 0.5625rem;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  color: var(--color-white);
  letter-spacing: 0;
  background-color: var(--color-text);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@media screen and (max-width: 767px) {
  .interview-card__title {
    padding-block: 0.125rem;
    font-size: 1rem;
    line-height: 1.8;
  }
}

.interview-card__attribute {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5625rem;
}
@media screen and (max-width: 767px) {
  .interview-card__attribute {
    gap: 0;
    margin-top: 0.875rem;
  }
}

.interview-card__attribute span {
  display: inline-block;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .interview-card__attribute span {
    padding-block: 0.25rem;
  }
}

.interview-card__attribute span:nth-child(1) {
  color: var(--color-white);
  background-color: var(--color-sky);
}

.interview-card__attribute span:nth-child(2) {
  padding: 0;
}

.interview-card__attribute span:nth-child(3) {
  background-color: var(--color-yellow);
}

.interview-card__name {
  display: flex;
  align-items: baseline;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .interview-card__name {
    margin-top: 0.125rem;
    font-size: 1.375rem;
  }
}
.interview-card__name::after {
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0;
  content: "さん";
}
@media screen and (max-width: 767px) {
  .interview-card__name::after {
    font-size: 0.875rem;
  }
}

.interview-card__list {
  display: flex;
  gap: 0.375rem;
}

.interview-card__list-title,
.interview-card__list-item {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  line-height: 1.8;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .interview-card__list-title,
  .interview-card__list-item {
    font-size: 0.875rem;
  }
}

.interview-card__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  margin-top: 0.5625rem;
}

.interview-card__tag span {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0;
  border: 1px solid currentcolor;
  border-radius: 0.5rem;
}
@media screen and (max-width: 767px) {
  .interview-card__tag span {
    font-size: 0.625rem;
  }
}

.interview-card__tag span.--yellow {
  color: var(--color-yellow);
}

.interview-card__tag span.--blue {
  color: var(--color-sky);
}

.interview-item:nth-child(2n) .interview-card__img::before {
  background-color: var(--color-yellow);
}

.loop-text {
  position: relative;
  z-index: 1;
}

.loop-text__band {
  margin-inline: -7.3206442167vw;
}

.loop-text__band--yellow {
  position: relative;
  z-index: 1;
  padding-block: 0.7320644217vw;
  background-color: var(--color-yellow);
  rotate: 3deg;
}
@media screen and (max-width: 767px) {
  .loop-text__band--yellow {
    padding-block: 0.5625rem;
    rotate: 6.33deg;
  }
}

.loop-text__band--blue {
  position: relative;
  z-index: 2;
  padding-block: 0.7320644217vw;
  margin-top: -4.2459736457vw;
  background-color: var(--color-sky);
  rotate: -6.5deg;
}
@media screen and (max-width: 767px) {
  .loop-text__band--blue {
    padding-block: 0.5625rem;
    margin-top: -3.125rem;
    rotate: -13.05deg;
  }
}

.loop-text__wrapper {
  display: flex;
  align-items: center;
}

.loop-text__items {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.loop-text__items--right {
  animation: loop-scroll-right 100s infinite linear both;
}

.loop-text__items--left {
  animation: loop-scroll-left 100s infinite linear both;
}

@keyframes loop-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.loop-text__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.loop-text__item img {
  display: block;
  width: auto;
  height: 4.39238653vw;
}
@media screen and (max-width: 767px) {
  .loop-text__item img {
    height: 2.375rem;
  }
}

.section-title {
  position: relative;
  line-height: 1;
  text-transform: uppercase;
  font-size: 3.75rem;
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 2.5rem;
  }
}

.section-title[data-position=center] {
  text-align: center;
}

.section-title[data-position=left] {
  text-align: left;
}

.section-title[data-position=right] {
  text-align: right;
}

.section-title::before {
  position: absolute;
  top: 50%;
  z-index: -1;
  color: var(--color-gray);
  content: attr(data-title);
  font-size: 7.5rem;
}
@media screen and (max-width: 767px) {
  .section-title::before {
    font-size: 3.75rem;
  }
}

.section-title[data-position=center]::before {
  left: 50%;
  translate: -50% -50%;
}

.section-title[data-position=left]::before {
  left: 0;
  translate: 0 -50%;
}

.section-title[data-position=right]::before {
  right: 0;
  translate: 0 -50%;
}

.support-card {
  position: relative;
  padding-block: 4.375rem 1.875rem;
  background-color: var(--color-white);
  border-radius: 3.75rem;
}
@media screen and (max-width: 767px) {
  .support-card {
    padding-block: 3.375rem 1.875rem;
  }
}

.support-card__head {
  position: absolute;
  top: -2.8125rem;
  left: 0.8125rem;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .support-card__head {
    top: -2.25rem;
    left: 0.4375rem;
    gap: 0.625rem;
  }
}

.support-card__num {
  position: relative;
  display: inline-block;
  width: 6.625rem;
  height: 6.3125rem;
  color: var(--color-sky);
  counter-increment: num;
}
@media screen and (max-width: 767px) {
  .support-card__num {
    width: 5.0625rem;
    height: 4.9375rem;
  }
}
.support-card__num::before, .support-card__num::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: fit-content;
  font-size: 5rem;
  font-weight: var(--fw-black);
  line-height: 1.2;
  letter-spacing: 0;
  content: counter(num, decimal-leading-zero);
}
@media screen and (max-width: 767px) {
  .support-card__num::before, .support-card__num::after {
    font-size: 4.125rem;
  }
}
.support-card__num::before {
  color: var(--color-text);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.support-card__num::after {
  text-shadow: 1px 0 0 var(--color-text), -1px 0 0 var(--color-text), 0 1px 0 var(--color-text), 0 -1px 0 var(--color-text), 1px 1px 0 var(--color-text), -1px -1px 0 var(--color-text), 1px -1px 0 var(--color-text), -1px 1px 0 var(--color-text);
  white-space: nowrap;
  transform: translate(calc(-50% - 0.1875rem), calc(-50% - 0.1875rem));
}

.support-card__title {
  display: inline;
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--color-white);
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 0% 10%, var(--color-sky) 10% 90%, transparent 90% 100%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.support-card__inner {
  padding-inline: 2.5rem;
}
@media screen and (max-width: 767px) {
  .support-card__inner {
    padding-inline: 1.875rem;
  }
}

.support-card__img {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 2.5rem;
}
.support-card__img::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-color: var(--color-sky);
  transform: translateX(-101%);
}

.support-card__img picture,
.support-card__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 304/235;
}

.support-card.is-img-wipe .support-card__img::before {
  animation: img-wipe 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes img-wipe {
  0% {
    transform: translateX(-101%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}
.support-card__text {
  margin-top: 1.1875rem;
  font-size: 1rem;
  font-weight: var(--fw--medium);
  line-height: 1.6;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .support-card__text {
    font-size: 0.875rem;
  }
}

.support-card:nth-child(2n) .support-card__img::before {
  background-color: var(--color-yellow);
}
.support-card:nth-child(2n) .support-card__num {
  color: var(--color-yellow);
}
.support-card:nth-child(2n) .support-card__title {
  color: var(--color-text);
  background: linear-gradient(180deg, transparent 0% 10%, var(--color-yellow) 10% 90%, transparent 90% 100%);
}

@media screen and (max-width: 767px) {
  .support-card:nth-child(4) {
    padding-top: 5.625rem;
  }
}

.support-cards:nth-child(2n) .support-card__img::before {
  background-color: var(--color-yellow);
}
.support-cards:nth-child(2n) .support-card:nth-child(2n) .support-card__img::before {
  background-color: var(--color-sky);
}
.support-cards:nth-child(2n) .support-card__num {
  color: var(--color-yellow);
}
.support-cards:nth-child(2n) .support-card:nth-child(2n) .support-card__num {
  color: var(--color-sky);
}
.support-cards:nth-child(2n) .support-card__title {
  color: var(--color-text);
  background: linear-gradient(180deg, transparent 0% 10%, var(--color-yellow) 10% 90%, transparent 90% 100%);
}
.support-cards:nth-child(2n) .support-card:nth-child(2n) .support-card__title {
  color: var(--color-white);
  background: linear-gradient(180deg, transparent 0% 10%, var(--color-sky) 10% 90%, transparent 90% 100%);
}

.about {
  padding-block: 9.25rem 0;
}
@media screen and (max-width: 767px) {
  .about {
    padding-block: 2.375rem 0;
  }
}

.about__inner {
  width: 100%;
  max-width: 70.875rem;
  padding-inline: 1.5625rem 1.75rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .about__inner {
    max-width: 33.75rem;
    padding-inline: 1.25rem;
  }
}

.about__container {
  display: grid;
  grid-template-columns: 1fr 19.75rem;
  gap: 3.75rem;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .about__container {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.about__head {
  grid-column: 1;
}
@media screen and (max-width: 767px) {
  .about__head {
    grid-row: 2;
    grid-column: 1;
  }
}

.about__heading {
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .about__heading {
    font-size: 1.5rem;
  }
}

.about__text {
  margin-block-start: 1.75rem;
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .about__text {
    margin-block-start: 1rem;
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 767px) {
  .about__text + .about__text {
    margin-top: 1.875rem;
  }
}

.about__title-wrapper {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2;
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .about__title-wrapper {
    grid-column: 1;
    padding-top: 0;
    padding-left: 0.5rem;
  }
}

.about__title {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .about__title {
    grid-row: 1;
  }
}

.about__title-en {
  display: block;
  width: 100%;
  max-width: 19.75rem;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .about__title-en {
    max-width: 12.5rem;
  }
}

.about__title-en img {
  height: 100%;
  object-fit: cover;
}

.about__title-ja {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.75rem;
  padding-inline: 1.5625rem;
  margin-top: 1.0625rem;
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: 200% 0%;
  mask-size: 200% 100%;
  transform: translateX(-0.3125rem);
  rotate: -5.35deg;
}
@media screen and (max-width: 767px) {
  .about__title-ja {
    padding-block: 0.625rem;
    padding-inline: 1.6875rem;
    margin-top: 0.625rem;
    transform: translateX(-0.9375rem);
  }
}

.about__title-ja.is-open {
  animation: mask 0.3s linear forwards;
}

.about__title-ja::before {
  position: absolute;
  inset: 0 0.625rem;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  transform: skewX(-15deg);
}

.about__title-ja-text {
  position: relative;
  display: inline-block;
  font-size: max(1.25rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .about__title-ja-text {
    font-size: max(1rem, 12px);
  }
}

.about__title-deco-wrapper {
  position: absolute;
  top: 52.5%;
  left: 51.6%;
  z-index: -1;
  width: 41.0625rem;
  aspect-ratio: 657/592;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .about__title-deco-wrapper {
    top: 46%;
    left: 34.8%;
    width: 20.8125rem;
  }
}

.about__title-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.about__title-deco-01 {
  z-index: -8;
}

.about__title-deco-02 {
  z-index: -7;
}

.about__title-deco-03 {
  z-index: -6;
}

.about__title-deco-04 {
  z-index: -5;
}

.about__title-deco-05 {
  z-index: -4;
}

.about__title-deco-06 {
  z-index: -3;
}

.about__title-deco-07 {
  z-index: -2;
}

.about__title-deco-08 {
  z-index: -1;
}

.about__link {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.25rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .about__link {
    flex-direction: column;
    max-width: 18rem;
    margin-inline: auto;
    margin-top: 1.875rem;
  }
}

.about__link .button {
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .about__link .button {
    flex: 1;
  }
}

.about__video {
  padding-block: 11.875rem 13.616398243vw;
  margin-top: -2.5rem;
  background-image: image-set(url("../images/about_video-bg.CouJBjvt.avif") type("image/avif"), url("../images/about_video-bg.Dwk4khzj.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center top 6.25rem;
  background-size: min(123.6456808199vw, 105.5625rem);
}
@media screen and (max-width: 767px) {
  .about__video {
    padding-block: 5.625rem 26.6666666667vw;
    background-image: image-set(url("../images/about_video-bg_sp.Bl2e4w32.avif") type("image/avif"), url("../images/about_video-bg_sp.C5p_Z7hY.png") type("image/png"));
    background-position: left calc(50% - 0.75rem) top -0.1875rem;
    background-size: min(174.9333333333vw, 41rem);
  }
}

.about__video-wrap {
  max-width: 48.75rem;
  aspect-ratio: 780/439;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0.375rem 0.375rem 0 color-mix(in srgb, var(--color-text) 20%, transparent);
}
@media screen and (max-width: 767px) {
  .about__video-wrap {
    aspect-ratio: 312/176;
    margin-inline: 0.5625rem 0.875rem;
  }
}

.about__video-wrap iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-slider__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}

.bg-slider__slide.is-active {
  visibility: visible;
  opacity: 1;
}

.bg-slider__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bg-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-slider__wipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0% 100% 0% 0%);
  pointer-events: none;
  background: var(--color-sky);
}

.bg-slider__wipe--orange {
  clip-path: inset(0% 0% 0% 100%);
  background: var(--color-yellow);
}

.faq {
  position: relative;
  padding-block: 8.875rem 7.5rem;
  overflow: hidden;
  background-color: var(--color-gray);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-repeat: repeat;
  background-size: 4.375rem 4.375rem;
  border-radius: 0 0 3.75rem 3.75rem;
}
@media screen and (max-width: 767px) {
  .faq {
    padding-block: 7.5rem 4.625rem;
    background-size: 2.5rem 2.5rem;
  }
}

.faq__head {
  max-width: 67.5rem;
  margin-inline: auto;
}

.faq__intro {
  display: flex;
  gap: 3.1875rem;
}
@media screen and (max-width: 767px) {
  .faq__intro {
    flex-direction: column;
    gap: initial;
  }
}

.faq__title {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
}

.faq__title-en {
  display: block;
  width: 100%;
  max-width: 12.5625rem;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .faq__title-en {
    max-width: 8.25rem;
  }
}

.faq__title-en img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 201/102;
}

.faq__title-ja {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  padding-inline: 1.5rem 2.3125rem;
  margin-block-start: 0.9375rem;
  margin-inline-start: 0.3125rem;
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: 200% 0%;
  mask-size: 200% 100%;
  transform: translateX(-0.625rem);
  rotate: -5.24deg;
}
@media screen and (max-width: 767px) {
  .faq__title-ja {
    padding-block: 0.375rem 0.4375rem;
    padding-inline: 1.4375rem 1.4375rem;
    margin-block-start: 0.5625rem;
    margin-inline-start: 0.25rem;
  }
}

.faq__title-ja.is-open {
  animation: mask 0.3s linear forwards;
}

.faq__title-ja::before {
  position: absolute;
  inset: 0 0.625rem;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  transform: skewX(-15deg);
}

.faq__title-ja-text {
  position: relative;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-white);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .faq__title-ja-text {
    font-size: 1rem;
  }
}

.faq__text {
  margin-block-start: 0.9375rem;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .faq__text {
    margin-block-start: 1.5rem;
    font-size: 1.375rem;
  }
}
@media (width <= 384px) {
  .faq__text {
    letter-spacing: -0.04em;
  }
}

.faq__controls {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 1.5625rem;
  align-items: center;
  justify-content: flex-end;
  margin-block-start: -0.625rem;
}
@media screen and (max-width: 767px) {
  .faq__controls {
    justify-content: center;
    margin-block-start: 2.4375rem;
  }
}

.faq__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #ea6593, #ec0299);
  filter: drop-shadow(0.25rem 0.25rem 0 oklch(from var(--color-black) l c h/20%));
  border: 1px solid var(--color-white);
  border-radius: 50%;
  transition: opacity var(--duration) ease-out;
}

.faq__nav-arrow {
  display: block;
  width: 0;
  height: 0;
  border-block: 0.25rem solid transparent;
}

.faq__nav--prev .faq__nav-arrow {
  margin-inline-end: 0.125rem;
  border-inline-end: 0.5625rem solid #fdd806;
}

.faq__nav--next .faq__nav-arrow {
  margin-inline-start: 0.125rem;
  border-inline-start: 0.5625rem solid #fdd806;
}

@media (any-hover: hover) {
  .faq__nav:hover {
    opacity: 0.85;
  }
}
.faq__pagination {
  display: inline-flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 1.25rem;
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .faq__pagination {
    gap: 0.75rem;
    font-size: 1.125rem;
  }
}

.faq__pagination-current,
.faq__pagination-total {
  display: inline-block;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.faq__pagination-divider {
  display: inline-block;
  width: 0.125rem;
  height: 1.65625rem;
  background-color: var(--color-black);
}

.faq__slider.swiper {
  position: relative;
  padding-block: 4.25rem;
  margin-block-start: -2.5rem;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  .faq__slider.swiper {
    padding-block: 3.25rem;
    margin-block-start: 0.8125rem;
  }
}

.faq__list {
  align-items: center;
  list-style: none;
}
.faq__list.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item.swiper-slide {
  flex-shrink: 0;
  width: 13.875rem;
  height: auto;
  transition: translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .faq__item.swiper-slide {
    width: 10.5rem;
  }
}

.faq__item.is-before-active {
  translate: -2.08125rem 0;
}
@media screen and (max-width: 767px) {
  .faq__item.is-before-active {
    translate: -1.575rem 0;
  }
}

.faq__item.is-after-active {
  translate: 2.08125rem 0;
}
@media screen and (max-width: 767px) {
  .faq__item.is-after-active {
    translate: 1.575rem 0;
  }
}

.faq__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 228/405;
  overflow: hidden;
  background-color: var(--color-black);
  border-radius: 1.25rem;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: center center;
}
@media screen and (max-width: 767px) {
  .faq__card {
    aspect-ratio: 172/307;
    border-radius: 1rem;
  }
}

.faq__thumb {
  position: absolute;
  inset: 0;
  display: block;
}
.faq__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 0;
}

.faq__item.swiper-slide-active .faq__iframe {
  pointer-events: auto;
}

.faq__slider.is-sliding .faq__iframe {
  pointer-events: none;
}

.faq__item.swiper-slide-active {
  position: relative;
  z-index: 2;
}

.faq__item.swiper-slide-active .faq__card {
  transform: scale(1.3);
}

.faq__badge {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 50%;
  translate: -50% 0;
}
@media screen and (max-width: 767px) {
  .faq__badge {
    inset-block-start: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }
}

.faq__description {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 2;
  color: var(--color-black);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .faq__description {
    font-size: 0.875rem;
  }
}

.footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-text);
}

.footer__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.625rem;
  padding-inline: 0.625rem;
}
@media screen and (max-width: 767px) {
  .footer__container {
    padding-inline: initial;
  }
}

.footer__copyright {
  line-height: 1;
}

.footer__copyright small {
  display: inline-block;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.1875;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .footer__copyright small {
    font-size: 0.625rem;
    line-height: 1.5;
  }
}

.footer__privacy-mark {
  display: block;
  width: 100%;
  max-width: 3.75rem;
}

.footer__privacy-mark img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-index-header);
  height: var(--header-height);
  background-color: var(--color-gray);
}

.header__inner {
  height: var(--header-height);
  padding-inline: clamp(0.625rem, -3.893rem + 6.02vw, 1.25rem); /* 10 ~ 20 | 1200 ~ 1366 */
}
@media screen and (max-width: 1199px) {
  .header__inner {
    padding-block: 0;
    padding-inline: 0.6875rem;
  }
}

.header__container {
  display: flex;
  gap: clamp(0rem, -9.036rem + 12.05vw, 1.25rem); /* 0 ~ 20 | 1200 ~ 1366 */
  align-items: center;
  justify-content: space-between;
  height: inherit;
}

.header__brand {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  height: inherit;
  padding-inline: 0.625rem;
}
@media screen and (max-width: 767px) {
  .header__brand {
    gap: 0.5rem;
    padding-inline: 0.375rem;
  }
}

.header__logo {
  height: inherit;
}

.header__logo-link {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 14.948125rem;
  height: inherit;
}
@media screen and (max-width: 767px) {
  .header__logo-link {
    max-width: 7.625rem;
  }
}

.header__logo-link .header__logo-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 239.17/50;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.header__divider {
  width: 0.125rem;
  height: 2.5rem;
  background: linear-gradient(0deg, #ff9300 0%, #ffd800 100%);
  border-radius: 100vmax;
}
@media screen and (max-width: 767px) {
  .header__divider {
    width: 1px;
    height: 1.1875rem;
  }
}

.header__recruit {
  display: flex;
  gap: 0.75rem;
}
@media screen and (max-width: 767px) {
  .header__recruit {
    gap: 0.375rem;
  }
}

.header__recruit-text {
  display: block;
  width: 100%;
  max-width: 4.36625rem;
}
@media screen and (max-width: 767px) {
  .header__recruit-text {
    max-width: 3rem;
    line-height: 1;
  }
}

.header__recruit-text img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 69.86/17.75;
}

.header__recruit-label {
  display: flex;
  align-items: center;
  padding: 0.46875rem 0.75rem;
  font-size: max(0.75rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1.1666666667;
  color: var(--color-white);
  white-space: nowrap;
  background-color: #595757;
  border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
  .header__recruit-label {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    line-height: 1.2;
    border-radius: 0.20625rem;
  }
}

.header__menu {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  height: inherit;
}
@media screen and (max-width: 1199px) {
  .header__menu {
    display: none;
  }
}

.header__nav {
  height: inherit;
}

.header__nav-list {
  display: flex;
  height: inherit;
}

.header__nav-item {
  height: inherit;
}

.header__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  height: inherit;
  padding-inline: 0.625rem;
  font-size: clamp(0.938rem, 0.486rem + 0.6vw, 1rem); /* 15 ~ 16 | 1200 ~ 1366 */
  font-weight: var(--fw-bold);
  color: var(--color-black);
  transition: color var(--duration) ease-out;
}

.header__nav-link::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 1.75rem;
  margin-block: auto;
  content: "";
  background-color: var(--color-white);
  transition: transform var(--duration) ease-out;
  transform: skewX(-20deg) scaleX(0);
  transform-origin: left center;
}

@media (any-hover: hover) {
  .header__nav-link:hover {
    color: #f29600;
  }
  .header__nav-link:hover::after {
    transform: skewX(-20deg) scaleX(1);
  }
}
.header__hamburger {
  display: none;
}
@media screen and (max-width: 1199px) {
  .header__hamburger {
    position: relative;
    z-index: 999;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    cursor: pointer;
    background: linear-gradient(90deg, #ea6593, #ec0299);
    border: 1px solid var(--color-white);
    border-radius: 0.625rem;
    box-shadow: 0.35375rem 0 0 oklch(from var(--color-black) l c h/20%);
    transition: opacity var(--duration) ease-out;
    backface-visibility: hidden;
    transform: translateZ(0);
    rotate: 45deg;
  }
}

@media (any-hover: hover) {
  .header__hamburger:hover {
    opacity: 0.7;
  }
}
.header__hamburger-bar {
  display: block;
  grid-area: 1/1;
  width: 1rem;
  height: 0.125rem;
  background-color: var(--color-yellow);
  transition: rotate var(--duration), translate var(--duration), opacity var(--duration);
  rotate: -45deg;
}

.header__hamburger-bar:nth-of-type(1) {
  translate: -0.25rem -0.25rem;
}

.header__hamburger-bar:nth-of-type(3) {
  translate: 0.25rem 0.25rem;
}

.header__hamburger.is-open .header__hamburger-bar:nth-of-type(1) {
  rotate: 0deg;
  translate: 0 0;
}

.header__hamburger.is-open .header__hamburger-bar:nth-of-type(2) {
  opacity: 0;
}

.header__hamburger.is-open .header__hamburger-bar:nth-of-type(3) {
  rotate: -90deg;
  translate: 0 0;
}

.header__drawer {
  display: none;
}
@media screen and (max-width: 1199px) {
  .header__drawer {
    position: fixed;
    inset: 0;
    z-index: 800;
    padding-block: 8.25rem 2.5rem;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(140%);
  }
}

.header__drawer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header__drawer-item {
  width: 100%;
}

.header__drawer-link {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-block: 1.25rem;
  padding-inline: 0.625rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.4375;
  color: var(--color-black);
  transition: color var(--duration) ease-out;
}

.header__drawer-link::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 1.75rem;
  margin-block: auto;
  content: "";
  background-color: var(--color-white);
  transition: transform var(--duration) ease-out;
  transform: skewX(-20deg) scaleX(0);
  transform-origin: left center;
}

@media (any-hover: hover) {
  .header__drawer-link:hover {
    color: #f29600;
  }
  .header__drawer-link:hover::after {
    transform: skewX(-20deg) scaleX(1);
  }
}
.header__drawer-cta {
  width: fit-content;
  margin-block-start: 0.875rem;
  margin-inline: auto;
}

.interview-item {
  cursor: pointer;
  background-image: image-set(url("../images/interview_bubble-bg.DMnrsYEo.avif") type("image/avif"), url("../images/interview_bubble-bg.Sa2CMsBB.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
@media screen and (max-width: 767px) {
  .interview-item {
    background-image: image-set(url("../images/interview_bubble-bg_sp.BNeSp4ED.avif") type("image/avif"), url("../images/interview_bubble-bg_sp.C5W1jDZz.png") type("image/png"));
  }
}

.interview-item__card {
  padding-block: 2.5rem 4.125rem;
}
@media screen and (max-width: 767px) {
  .interview-item__card {
    padding-block: 1.875rem 3.625rem;
  }
}

.interview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  height: 100vh;
  overflow: scroll;
  pointer-events: none;
  visibility: hidden;
  background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
  backdrop-filter: blur(0.3125rem);
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media screen and (max-width: 767px) {
  .interview-modal {
    transition: opacity 0.6s ease, visibility 0s linear 0.5s;
  }
}

.interview-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
@media screen and (max-width: 767px) {
  .interview-modal.is-open {
    transition: opacity 0.5s ease, visibility 0s linear 0s;
  }
}

.interview-modal__container {
  position: relative;
  top: 1.4375rem;
  width: min(57.1010248902vw, 48.75rem);
  height: auto;
  max-height: 75.9114583333vh;
  padding-block: 3.125rem;
  background-color: var(--color-white);
  border-radius: 3.75rem;
}
@media screen and (max-width: 767px) {
  .interview-modal__container {
    width: 94.6666666667vw;
    max-width: 31.25rem;
    height: auto;
    max-height: 80vh;
    padding-block: 1.875rem;
  }
}

.interview-modal__inner {
  height: 100%;
  padding-inline: 3.125rem;
}
@media screen and (max-width: 767px) {
  .interview-modal__inner {
    padding-inline: 2.3125rem;
  }
}

.interview-modal__close-button {
  position: absolute;
  top: -4.0625rem;
  right: 0;
  display: inline-block;
  width: 3.375rem;
  height: auto;
  aspect-ratio: 1;
  background-image: image-set(url("../images/button_close.DgXaJUIo.avif") type("image/avif"), url("../images/button_close.Du4VqLOY.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 100vw;
  box-shadow: 0.25rem 0 0 color-mix(in srgb, var(--color-text) 20%, transparent);
  rotate: 45deg;
}
@media screen and (max-width: 767px) {
  .interview-modal__close-button {
    top: -3rem;
    right: 1.375rem;
    width: 2.5rem;
  }
}

.interview-modal__video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--interview-video);
  overflow: hidden;
  border-radius: 1.875rem;
}

.interview-modal__video iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  object-fit: contain;
}

.interview {
  position: relative;
  z-index: 1;
  padding-bottom: 6.25rem;
  margin-top: -25rem;
  background-image: image-set(url("../images/interview_bg.De9K297q.avif") type("image/avif"), url("../images/interview_bg.aoZhiteh.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center top 10.625rem;
  background-size: 100% 100%;
  border-radius: 0 0 3.75rem 3.75rem;
}
@media screen and (max-width: 767px) {
  .interview {
    padding-bottom: 4.75rem;
    margin-top: -14.375rem;
    background-image: image-set(url("../images/interview_bg_sp.DI-eWFPL.avif") type("image/avif"), url("../images/interview_bg_sp._T1Oujyf.png") type("image/png"));
  }
}

.interview__inner {
  width: 100%;
  max-width: 63.125rem;
  padding-inline: 1.5625rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .interview__inner {
    max-width: 33.75rem;
    padding-inline: 1.25rem;
  }
}

.interview__title-wrapper {
  display: block;
}

.interview__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding-top: 7.6875rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .interview__title {
    padding-top: 7.9375rem;
  }
}

.interview__title-en {
  display: block;
  width: 100%;
  max-width: 34.375rem;
  margin-inline: auto;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .interview__title-en {
    max-width: 21.5rem;
  }
}

.interview__title-en img {
  height: 100%;
  object-fit: cover;
}

.interview__title-ja {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.75rem;
  padding-inline: 1.625rem;
  margin-top: 1.4375rem;
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: 200% 0%;
  mask-size: 200% 100%;
  transform: translateX(0.4375rem);
  rotate: -5.35deg;
}
@media screen and (max-width: 767px) {
  .interview__title-ja {
    padding-block: 0.625rem;
    padding-inline: 1.875rem;
    margin-top: 0.4375rem;
    transform: translateX(-0.25rem);
  }
}

.interview__title-ja.is-open {
  animation: mask 0.3s linear forwards;
}

.interview__title-ja::before {
  position: absolute;
  inset: 0 0.625rem;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  transform: skewX(-15deg);
}

.interview__title-ja-text {
  position: relative;
  display: inline-block;
  font-size: max(1.25rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .interview__title-ja-text {
    font-size: max(1rem, 12px);
  }
}

.interview__fukidashi {
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0;
}
.interview__fukidashi::before {
  position: absolute;
  z-index: -1;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.interview__fukidashi-01 {
  top: 1.625rem;
  right: calc(50% - 5.25rem);
  width: 24.5rem;
  font-size: max(1.25rem, 12px);
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--color-white);
  letter-spacing: 0.06em;
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-01 {
    top: 1.625rem;
    right: calc(50% - 6.75rem);
    width: 17.75rem;
    font-size: max(1rem, 12px);
    letter-spacing: 0;
  }
}
.interview__fukidashi-01::before {
  top: 60%;
  left: 50%;
  width: 100%;
  aspect-ratio: 392/124;
  background-image: url("../images/section_interview_fukidashi_black_pc.DJo69hg6.svg");
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-01::before {
    top: 64%;
    left: 48%;
    aspect-ratio: 279/101;
    background-image: url("../images/section_interview_fukidashi_black_sp.uU0SCbZ0.svg");
  }
}

.interview__fukidashi-02 {
  top: 9.25rem;
  left: -6.5rem;
  width: 6.1875rem;
  font-size: max(0.75rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-02 {
    top: 7.5rem;
    left: -1.0625rem;
    width: 3.8125rem;
    font-size: 10px;
  }
}
.interview__fukidashi-02::before {
  top: 80%;
  left: 48%;
  width: 100%;
  aspect-ratio: 99/58;
  background-image: url("../images/section_interview_fukidashi_yellow.CCvnCyGa.svg");
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-02::before {
    top: 60%;
  }
}

.interview__fukidashi-03 {
  top: 5.1875rem;
  left: calc(50% + 5.5rem);
  width: 6.875rem;
  font-size: max(0.75rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-yellow);
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-03 {
    top: 7rem;
    left: calc(50% + 5.8125rem);
    width: 4.125rem;
    font-size: 10px;
  }
}
.interview__fukidashi-03::before {
  top: 90%;
  left: 50%;
  width: 100%;
  aspect-ratio: 110/59;
  background-image: url("../images/section_interview_fukidashi_white.BbLjGJyv.svg");
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-03::before {
    top: 70%;
  }
}

.interview__fukidashi-04 {
  top: 11rem;
  right: -3.125rem;
  width: 7.25rem;
  font-size: max(0.75rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-04 {
    top: 0.8125rem;
    right: 0;
    width: 5.125rem;
    font-size: 10px;
  }
}
.interview__fukidashi-04::before {
  top: 80%;
  left: 50%;
  width: 100%;
  aspect-ratio: 116/60;
  background-image: url("../images/section_interview_fukidashi_blue.Ch99QgBo.svg");
}
@media screen and (max-width: 767px) {
  .interview__fukidashi-04::before {
    top: 75%;
  }
}

.interview__list {
  margin-top: 4.8125rem;
}
@media screen and (max-width: 767px) {
  .interview__list {
    margin-top: 4rem;
  }
}

.interview__list-item + .interview__list-item {
  margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
  .interview__list-item + .interview__list-item {
    margin-top: 1.25rem;
  }
}

.job__inner {
  width: 100%;
  max-width: 85.375rem;
  padding-inline: 1.25rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .job__inner {
    max-width: 31.25rem;
    padding-inline: 0;
  }
}

.job__copy {
  position: relative;
  width: 100%;
  max-width: 26.5rem;
  margin-block: 22.5rem 21.625rem;
  margin-inline: auto;
}
@media screen and (width <= 1024px) {
  .job__copy {
    max-width: 41.40625vw;
  }
}
@media screen and (max-width: 767px) {
  .job__copy {
    width: 100%;
    max-width: 17.875rem;
    margin-block: 10.3125rem 6.0625rem;
  }
}

.job__copy-bg {
  display: block;
  opacity: 0;
}

.job__copy-text {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  opacity: 0;
}

.job__body {
  position: relative;
  padding-block: 4.0625rem 5.1875rem;
  padding-inline: 3.75rem;
  overflow: hidden;
  background: linear-gradient(90deg, #ea6593, #ec0299);
  isolation: isolate;
  border-radius: 7.5rem;
}
@media screen and (max-width: 767px) {
  .job__body {
    padding-block: 3rem 3.75rem;
    padding-inline: 1.25rem;
    border-radius: 5rem;
  }
}

.job__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.job__title-en {
  display: block;
  width: 100%;
  max-width: 57.25rem;
}
@media screen and (max-width: 767px) {
  .job__title-en {
    max-width: 20.9375rem;
  }
}

.job__title-en img {
  height: auto;
}

.job__title-ja {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.6875rem;
  padding-inline: 1.625rem;
  margin-top: 0.5625rem;
}
@media screen and (max-width: 767px) {
  .job__title-ja {
    padding-block: 0.5rem;
    padding-inline: 1.1875rem;
    margin-top: 0.6875rem;
  }
}

.job__title-ja::before {
  position: absolute;
  inset: 0 0.625rem;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  transform: skewX(-15deg);
}

.job__title-ja-text {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .job__title-ja-text {
    font-size: 0.875rem;
  }
}

.job__lead {
  margin-top: 0.9375rem;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .job__lead {
    margin-top: 1.5625rem;
    font-size: 1.375rem;
  }
}

.job__lead-br {
  display: none;
}
@media screen and (max-width: 767px) {
  .job__lead-br {
    display: block;
  }
}

.job__text-wrapper {
  margin-top: 0.9375rem;
}
@media screen and (max-width: 767px) {
  .job__text-wrapper {
    padding-inline: 1.4375rem;
    margin-top: 0.6875rem;
  }
}

.job__text {
  font-size: max(1rem, 12px);
  font-weight: var(--fw-bold);
  line-height: 2;
  color: var(--color-white);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .job__text {
    font-size: max(0.875rem, 12px);
    text-align: left;
  }
}

.job__text:nth-child(n+2) {
  margin-top: 2.125rem;
}
@media screen and (max-width: 767px) {
  .job__text:nth-child(n+2) {
    margin-top: 1.75rem;
  }
}

.job__entry-button {
  position: relative;
  margin-top: 5.125rem;
}
@media screen and (max-width: 767px) {
  .job__entry-button {
    margin-top: 1.5625rem;
  }
}

.job__deco-text {
  position: absolute;
  right: 0;
  bottom: -0.375rem;
  left: 0;
  z-index: -1;
  overflow: hidden;
}

.job__deco-text-wrapper {
  display: flex;
  align-items: center;
}

.job__deco-text-items {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.job__deco-text-items--left {
  animation: job-deco-scroll-left 120s infinite linear both;
}

.job.is-deco-paused .job__deco-text-items--left {
  animation-play-state: paused;
}

@keyframes job-deco-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.job__deco-text-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.job__deco-text-item img {
  display: block;
  width: auto;
  height: 8.625rem;
}
@media screen and (max-width: 767px) {
  .job__deco-text-item img {
    height: 4.8125rem;
  }
}

.job__loop-item {
  padding-block: 6.2957540264vw 5.4172767204vw;
}
@media screen and (max-width: 767px) {
  .job__loop-item {
    padding-block: 9.8666666667vw 4.8vw;
  }
}

.mv {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 55.93cqi;
  margin-top: 3.125rem;
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .mv {
    height: min(145.3333333333cqi, 44.1875rem);
    margin-top: 2.8125rem;
  }
}

.mv__title-wrapper {
  position: absolute;
  top: 22.33cqi;
  left: 50%;
  z-index: 2;
  text-align: center;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .mv__title-wrapper {
    top: min(39cqi, 12.1875rem);
  }
}

.mv__main-title {
  width: 53.37cqi;
  margin-inline: auto;
  filter: drop-shadow(0 0 10px #000);
  opacity: 0;
  transform: scale(0);
}
@media screen and (max-width: 767px) {
  .mv__main-title {
    width: min(89.87cqi, 28.0625rem);
    filter: drop-shadow(0 0 6px #000);
  }
}
.mv__main-title img {
  display: block;
  width: 100%;
  height: auto;
}

.mv__sub-title {
  position: relative;
  width: 52.05cqi;
  margin-inline: auto;
  margin-top: -0.09cqi;
}
@media screen and (max-width: 767px) {
  .mv__sub-title {
    width: min(100cqi, 31.25rem);
    margin-top: min(33.33cqi, 10.4375rem);
  }
}
.mv__sub-title img {
  display: block;
  width: 100%;
  height: auto;
}

.mv__sub-title-bg {
  display: block;
  opacity: 0;
}

.mv__sub-title-text {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}

.mv__sp {
  position: absolute;
  inset: 0;
  width: 104.2666666667%;
  max-width: 31.25rem;
  margin-inline: auto;
}

.mv__sp-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
}

.mv__sp-panel {
  position: relative;
  width: 100%;
}
.mv__sp-panel picture {
  position: relative;
  z-index: 1;
  display: block;
}
.mv__sp-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.mv__sp-panel--a {
  margin-inline-start: -1.625rem;
}

.mv__sp-panel--b {
  position: relative;
  z-index: 1;
  margin-inline-start: 0.625rem;
  margin-top: -3.125rem;
}

.mv__sp-fill {
  position: absolute;
  inset: 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__sp-fill--a {
  background-color: var(--color-sky);
}

.mv__sp-fill--b {
  background-color: var(--color-yellow);
}

.mv__sp-img {
  height: 100%;
  object-fit: contain;
}

.mv__sp-fill--a .mv__sp-img {
  aspect-ratio: 391/265;
}

.mv__sp-fill--b .mv__sp-img {
  aspect-ratio: 391/272;
}

.mv__pc {
  position: absolute;
  inset: 0;
}

.mv__pc-bg {
  position: absolute;
  inset: 0;
}
.mv__pc-bg .mv__pc-panel {
  background-color: #ededed;
}

.mv__pc-group {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.mv__pc-panel {
  position: absolute;
  top: 0;
}
.mv__pc-panel picture,
.mv__pc-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv__pc-panel--01 {
  left: 0;
  width: 23.8202247191%;
  height: 100%;
  mask-image: url("../images/mv_mask_01.ipaEO1sV.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__pc-panel--02 {
  left: 12.3101123596%;
  width: 29.2883895131%;
  height: 91.8774966711%;
  mask-image: url("../images/mv_mask_02.DrIxY1nY.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__pc-panel--03 {
  left: 35.7857677903%;
  width: 28.3895131086%;
  height: 85.6191744341%;
  mask-image: url("../images/mv_mask_03.ZjT82GOZ.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__pc-panel--04 {
  left: 58.4397003745%;
  width: 29.2883895131%;
  height: 91.4780292943%;
  mask-image: url("../images/mv_mask_04.Bih0iqRy.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__pc-panel--05 {
  left: 76.2913857678%;
  width: 23.7453183521%;
  height: 100%;
  mask-image: url("../images/mv_mask_05.CAPOCzBH.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mv__pc-line {
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.mv__pc-line--01 {
  top: -1.9973368842%;
  left: 12.0606741573%;
  width: 11.7602996255%;
  height: 94.2743009321%;
}

.mv__pc-line--02 {
  top: -1.9973368842%;
  left: 35.5805243446%;
  width: 5.8426966292%;
  height: 86.2849533955%;
}

.mv__pc-line--03 {
  top: -1.9973368842%;
  left: 58.5767790262%;
  width: 5.8426966292%;
  height: 86.2849533955%;
}

.mv__pc-line--04 {
  top: -1.9973368842%;
  left: 76.1985018727%;
  width: 11.7602996255%;
  height: 94.2743009321%;
}

.mv__pc-line--05 {
  top: auto;
  bottom: -0.2196193265%;
  left: 49.5%;
  z-index: 2;
  width: 102.1229868228%;
  height: auto;
  aspect-ratio: 1348/153;
  transform: translateX(-50%);
  transform-origin: top center;
  rotate: -0.08deg;
}

/* Safari CSSハック */
::-webkit-full-page-media,
:future,
:root .mv__pc-line--05 {
  bottom: clamp(0.063rem, 0.966rem - 1.2vw, -0.063rem); /* 1 ~ -1 | 1200 ~ 1366 */
  rotate: -0.1deg;
}

/* Firefox CSSハック */
@-moz-document url-prefix() {
  :root .mv__pc-line--05 {
    bottom: -0.3660322108%;
    rotate: 0deg;
  }
}
.pin-section__loop-text {
  position: relative;
  z-index: 1;
  transform: translateY(-2.5622254758vw);
}
@media screen and (max-width: 767px) {
  .pin-section__loop-text {
    transform: translateY(-16vw);
  }
}

.pin-section__bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin-top: -7.3206442167vw;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .pin-section__bg {
    margin-top: -21.3333333333vw;
  }
}

.pin-section__bg-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
}

.pin-section__bg-line {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  height: 100%;
  pointer-events: none;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .pin-section__bg-line {
    display: none;
  }
}

.pin-section__bg-line img {
  width: auto;
  height: 100%;
}

.pin-section__bg-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pin-section__bg-sp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
  }
}

.pin-section__bg-sp picture,
.pin-section__bg-sp img {
  width: 100%;
  height: 100%;
}

.pin-section__bg-sp img {
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .pin-section__bg-wrap > .pin-section__bg-slider {
    display: none;
  }
}

.support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0rem 1.5rem;
  counter-reset: num;
}
@media screen and (max-width: 767px) {
  .support-cards {
    grid-template-columns: 1fr;
    gap: 4.8125rem;
  }
}

.support-cards:nth-child(2) {
  counter-reset: num 3;
}
@media screen and (max-width: 767px) {
  .support-cards:nth-child(2) {
    margin-top: 4.8125rem;
  }
}

.support-cards__item {
  height: fit-content;
}

.support-cards__item:nth-child(3n+1) {
  margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
  .support-cards__item:nth-child(3n+1) {
    margin-top: 0;
  }
}

.support-cards__item:nth-child(3n+2) {
  margin-top: 3.75rem;
}
@media screen and (max-width: 767px) {
  .support-cards__item:nth-child(3n+2) {
    margin-top: 0;
  }
}

.support {
  position: relative;
  z-index: 1;
  padding-block: 8.5rem 28.5625rem;
  margin-top: max(-100vh + 39.25rem, -17.875rem);
  background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
  backdrop-filter: blur(20px);
  border-radius: 3.75rem 3.75rem 0 0;
}
@media screen and (max-width: 767px) {
  .support {
    padding-block: 5rem 18.75rem;
    margin-top: max(-100vh + 22.1875rem, -66vh);
  }
}

.support__head-inner {
  width: 100%;
  max-width: 70.375rem;
  padding-inline: 1.5625rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .support__head-inner {
    max-width: 33.75rem;
    padding-inline: 1.0625rem;
  }
}

.support__container {
  display: grid;
  grid-template-columns: 26.625rem 1fr;
  gap: 0.625rem;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .support__container {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.support__head {
  margin-top: 1.3125rem;
}
@media screen and (max-width: 767px) {
  .support__head {
    margin-top: 0;
  }
}

.support__heading {
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .support__heading {
    font-size: 1.5rem;
  }
}

.support__text {
  margin-block-start: 1.25rem;
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .support__text {
    margin-block-start: 1.25rem;
    font-size: 0.875rem;
  }
}

.support__title-wrapper {
  display: block;
}

.support__title {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .support__title {
    display: inline-flex;
  }
}

.support__title-en {
  display: block;
  width: 100%;
  max-width: 26.625rem;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .support__title-en {
    max-width: 16.6875rem;
  }
}

.support__title-en img {
  height: 100%;
  object-fit: cover;
}

.support__title-ja {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.75rem;
  padding-inline: 1.5rem;
  margin-top: 1.6875rem;
  mask-image: linear-gradient(90deg, #fff 0% 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: 200% 0%;
  mask-size: 200% 100%;
  transform: translateX(-0.625rem);
  rotate: -5.35deg;
}
@media screen and (max-width: 767px) {
  .support__title-ja {
    padding-block: 0.625rem;
    padding-inline: 1.5rem 1.3125rem;
    margin-top: 0.375rem;
    transform: translateX(-0.4375rem);
  }
}

.support__title-ja.is-open {
  animation: mask 0.3s linear forwards;
}

.support__title-ja::before {
  position: absolute;
  inset: 0 0.625rem;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  transform: skewX(-15deg);
}

.support__title-ja-text {
  position: relative;
  display: inline-block;
  font-size: max(1.25rem, 12px);
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .support__title-ja-text {
    font-size: max(1rem, 12px);
  }
}

.support__title-deco-wrapper {
  position: absolute;
  top: 53.3%;
  left: 40.7%;
  z-index: -1;
  width: 41.0625rem;
  aspect-ratio: 657/592;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .support__title-deco-wrapper {
    top: 36.1%;
    left: 53.7%;
    width: 20.3125rem;
  }
}

.support__title-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.support__title-deco-01 {
  z-index: -8;
}

.support__title-deco-02 {
  z-index: -7;
}

.support__title-deco-03 {
  z-index: -6;
}

.support__title-deco-04 {
  z-index: -5;
}

.support__title-deco-05 {
  z-index: -4;
}

.support__title-deco-06 {
  z-index: -3;
}

.support__title-deco-07 {
  z-index: -2;
}

.support__title-deco-08 {
  z-index: -1;
}

.support__item-wrapper {
  margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
  .support__item-wrapper {
    margin-top: 3.25rem;
  }
}

@media (width <= 767px) {
  [data-only-device=md] {
    display: none;
  }
}

@media (width >= 768px) {
  [data-only-device=sm] {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}