@charset "UTF-8";
/* リキッドレイアウト対応 */
:root {
  --innerValue: 1180;
  --inner: calc(var(--innerValue) * 1px);
  --inner-sValue: 968;
  --inner-s: calc(var(--inner-sValue) * 1px);
  --padding-pc: 25px;
  --padding-sp: 20px;
  --thin: 100;
  --light: 300;
  --normal: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 500;
  --large: 700;
  --ex-bold: 800;
  --base-font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --noto-font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --outfit-font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --optima-font-family: "Optima", "Helvetica Neue", Arial, sans-serif;
  --base-color: #000;
  --base-background: #fff;
  --back: #333;
  --black: #333;
  --white: #fff;
  --blue: #126ba7;
  --blue2: #00167d;
  --light-blue: #58dfff;
  --light-blue2: #8DC2FF;
  --light-blue3: #00aec7;
  --filter: #1b1c32;
  --border: #808080;
  --gray: #64748c;
  --gradient: linear-gradient( 90deg, #00aec7, #00167d);
  --gradient-180: linear-gradient( 180deg, #00aec7, #00167d);
  --gradient-360: linear-gradient( 360deg, #00aec7, #00167d);
  --gradient2: linear-gradient( 90deg, #b2e6ee, #699cde);
  --gradient2-50: linear-gradient( 90deg, rgba(178, 230, 238, 0.5), rgba(105, 156, 222, 0.5));
  --gradient2-180: linear-gradient( 180deg, #b2e6ee, #699cde);
  --gradient2-180-50: linear-gradient(180deg, rgba(178, 230, 238, 0.5), rgba(105, 156, 222, 0.5));
  --gradient3: linear-gradient( 90deg, #00aec7, #0057c7);
  --gradient3-180: linear-gradient( 180deg, #00aec7, #0057c7);
  --gradient4-180: linear-gradient( 180deg, #A3D5DE, #1D2368);
  --shadow: 2px 2px 2px color-mix(in srgb, var(--base-color) 30%, transparent);
  --btn-fucus: #fff;
  --header: 100;
  --hamburger: 103;
  --drawer: 102;
  --drawer-back: 101;
  --page-top: 99;
  --base-line-height: 1.5;
  --duration: .3s ease;
  --leading-trim: calc((1em - 1lh) / 2);
  /* デザインカンプで取得した余白が32pxの場合 */
}

/********************************
* @font-face定義
********************************/
@font-face {
  font-family: "Noto Sans JP";
  src: url("../../assets/font/NotoSansJP-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../../assets/font/NotoSansJP-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../../assets/font/NotoSansJP-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../../assets/font/NotoSansJP-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../../assets/font/Outfit-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../../assets/font/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../../assets/font/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../../assets/font/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../../assets/font/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Optima";
  src: url("../../assets/font/Optima.ttc") format("truetype-collection");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/********************************
* セッティング反映
********************************/
body {
  color: var(--base-color);
  font-family: var(--base-font-family);
  font-weight: var(--thin);
  line-height: var(--base-line-height);
  background: var(--base-background);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #007bff;
}

/********************************
* font埋め込み
********************************/
.u-desktop {
  display: block;
}

.u-mobile {
  display: none;
}

html {
  font-size: 16px;
}

/*! kiso.css v1.2.2 | MIT License | https://github.com/tak-dcxi/kiso.css */
/* ======================================================
//  MARK: Universal
// ====================================================== */
*,
::before,
::after {
  /*
  * Includes `padding` and `border` in the element's specified dimensions.
  * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
  */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ======================================================
//  MARK: Document and Body Elements
// ====================================================== */
:where(:root) {
  /* In Safari, if `font-family` is not specified, a serif font is applied by default, so `sans-serif` is set as the default here. */
  font-family: sans-serif;
  /*
  * For accessibility, it is recommended to set the `line-height` to at least 1.5 times the text size within paragraphs.
  * @see https://waic.jp/translations/WCAG21/#visual-presentation
  */
  line-height: 1.5;
  /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
  text-spacing-trim: trim-start;
  /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
  text-autospace: normal;
  /* Prevents misreading by applying strict line-breaking rules. */
  line-break: strict;
  /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */
  overflow-wrap: anywhere;
  /*
  * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small.
  * This controls the auto-adjustment feature to prevent unwanted resizing.
  */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  /* Prevents layout shift caused by the appearance or disappearance of the scrollbar. */
  scrollbar-gutter: stable;
  /* Suppresses the tap highlight on iOS. */
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  /*
  * When creating a sticky footer, a minimum height is often required.
  * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer.
  */
  min-block-size: 100dvb;
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

/* ======================================================
// MARK: Sections
// ------------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

:where(h1) {
  /*
  * Adjusts user agent (UA) styles for `h1` elements within sectioning content.
  * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties.
  * @see https://html.spec.whatwg.org/#sections-and-headings
  */
  margin-block: 0.67em;
  font-size: 2em;
}

:where(h2, h3, h4, h5, h6) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(search) {
  /*
  * The `<search>` element is supported from Safari 17.
  * This prevents it from being displayed as an inline element in unsupported environments.
  */
  display: block flow;
}

/* ======================================================
//  MARK: Grouping content
// ====================================================== */
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(blockquote, figure) {
  /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline: unset;
}

:where(p:lang(en)) {
  /*
  * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read.
  * Therefore, when lang="en", this prevents the last line from ending with a single word.
  */
  text-wrap: pretty;
}

:where(address:lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(ul, ol, menu) {
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  -webkit-padding-start: unset;
          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. */
  -webkit-margin-start: unset;
          margin-inline-start: unset;
}

:where(pre) {
  /*
  * Since `text-spacing-trim` can affect spacing in `<pre>` elements even with its initial value, the final rendering may depend on the user's font settings.
  * To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
  */
  text-spacing-trim: space-all;
  /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
  text-autospace: no-autospace;
}

/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

:where(:is(i, cite, em, dfn, var):lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
  -webkit-font-feature-settings: initial;
          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., `⇒`).
  */
  -webkit-font-variant-ligatures: none;
          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
  */
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
  cursor: help;
}

:where(time) {
  /* Set to `no-autospace` because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}
/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a:-moz-any-link) {
  /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
  color: unset;
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
}
:where(a:any-link) {
  /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
  color: unset;
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  -webkit-text-decoration-line: unset;
          text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
  /* Automatically adjust block size based on content. */
  block-size: auto;
  /* Prevents overflow by setting the maximum width to `100%`. */
  max-inline-size: 100%;
  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}

:where(iframe) {
  /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
  border: unset;
}

/* ======================================================
//  MARK: Tabular data
// ====================================================== */
:where(table) {
  /* Collapse borders for a more refined table design. */
  border-collapse: collapse;
}

:where(caption, th) {
  /* The `text-align` specified in the UA stylesheet is often unnecessary, so it is reset. */
  text-align: unset;
}

:where(caption) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

/* ======================================================
//  MARK: Forms
// ====================================================== */
::-webkit-file-upload-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(button, input, select, textarea),
::file-selector-button {
  /*
  * These elements are often styled with a border, so a `1px` border is applied by default for consistency.
  * This ensures readability even for unstyled elements.
  * When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
  */
  border-width: 1px;
  border-style: solid;
  /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
  border-color: unset;
  border-radius: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
}

:where(input:is([type=radio i], [type=checkbox i])) {
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

:where(input[type=file i]) {
  /* The `border` is often unnecessary, so it is reset here. */
  border: unset;
}

:where(input[type=search i]) {
  /* Remove the rounded corners of search inputs on macOS and normalize the background color. */
  -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
  :where(input[type=search i]) {
    /* normalize the background color on iOS. */
    background-color: Canvas;
  }
}
:where(input:is([type=tel i],
[type=url i],
[type=email i],
[type=number i]):not(:-moz-placeholder-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(input:is([type=tel i],
[type=url i],
[type=email i],
[type=number i]):not(:-ms-input-placeholder)) {
  /*
  * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
  * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
  * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
  direction: ltr;
}
:where(input:is([type=tel i],
[type=url i],
[type=email i],
[type=number i]):not(:placeholder-shown)) {
  /*
  * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
  * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
  * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
  direction: ltr;
}

:where(textarea) {
  /* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
  /* Allows vertical resizing for `<textarea>` elements. */
  resize: block;
}

:where(input:not([type=button i], [type=submit i], [type=reset i]),
textarea,
[contenteditable]) {
  /* Set to `no-autospace` because `text-autospace` can insert spaces during input, potentially causing erratic behavior. */
  text-autospace: no-autospace;
}

::-webkit-file-upload-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])),
::file-selector-button {
  /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;
}

::-webkit-file-upload-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,
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.
  */
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

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

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

::-webkit-input-placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

::-moz-placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

:-ms-input-placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

::-ms-input-placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

::placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

/* ======================================================
//  MARK: Interactive elements
// ====================================================== */
:where(summary) {
  /* The default triangle marker is often unnecessary, so it is disabled. */
  list-style-type: "";
  /* Changing the cursor to a pointer clarifies the clickability of the element. */
  cursor: pointer;
}

:where(summary)::-webkit-details-marker {
  /* In Safari versions earlier than 18.4 (released in April 2025), a triangle icon is displayed using the -webkit-details-marker CSS pseudo-element, so it should be removed. */
  display: none;
}

:where(dialog, [popover]) {
  /*
  * When these fixed-position elements are scrolled, preventing scroll chaining on the underlying page and bounce effects on mobile improves usability.
  * Disabling block-direction scroll chaining is recommended.
  */
  overscroll-behavior-block: contain;
  /* The following default styles are often unnecessary, so they are reset. */
  padding: unset;
  border: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /*
  * These elements can be easily displayed by explicitly setting their `display` property.
  * To prevent them from appearing when not in an open state, they are forcibly hidden.
  */
  display: none !important;
}

:where(dialog) {
  /*
  * The max width and height of a `<dialog>` element are typically determined by the design.
  * These UA stylesheet properties are reset as they can be obstructive, especially when trying to make the dialog full-screen.
  */
  max-inline-size: unset;
  max-block-size: unset;
}

:where(dialog)::-ms-backdrop {
  /* Normalize the background color of the `::backdrop` element. */
  background-color: oklch(0% 0 0deg/30%);
}

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

.c-accordion {
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid var(--base-color);
}

.c-accordion__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: calc(19 / 16 * 1rem);
  color: var(--white);
  background: var(--base-color);
  padding: calc(23 / 16 * 1rem) calc(75 / 16 * 1rem) calc(23 / 16 * 1rem) calc(47 / 16 * 1rem);
  -webkit-transition: background var(--duration), opacity var(--duration);
  transition: background var(--duration), opacity var(--duration);
  text-align: left;
  position: relative;
}
.c-accordion__btn::before, .c-accordion__btn::after {
  content: "";
  display: block;
  width: calc(27 / 16 * 1rem);
  height: 3px;
  background: currentColor;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  right: calc(45 / 16 * 1rem);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: -webkit-transform var(--duration);
  transition: -webkit-transform var(--duration);
  transition: transform var(--duration);
  transition: transform var(--duration), -webkit-transform var(--duration);
}
.c-accordion__btn::before {
  -webkit-transform: translate(0%, -50%) rotate(90deg);
          transform: translate(0%, -50%) rotate(90deg);
}
.c-accordion__btn::after {
  -webkit-transform: translate(0%, -50%) rotate(0deg);
          transform: translate(0%, -50%) rotate(0deg);
}
.c-accordion__btn[aria-expanded=true]::before {
  -webkit-transform: translate(0%, -50%) rotate(0deg);
          transform: translate(0%, -50%) rotate(0deg);
}

.c-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: 250ms grid-template-rows ease, 250ms padding-block ease;
  transition: 250ms grid-template-rows ease, 250ms padding-block ease;
  transition: 250ms grid-template-rows ease, 250ms padding-block ease, 250ms -ms-grid-rows ease;
  padding-inline: calc(47 / 16 * 1rem);
  background: var(--white);
}
.c-accordion__body > div {
  overflow: hidden;
}
.c-accordion__body[aria-hidden=false] {
  grid-template-rows: 1fr;
  padding-block: calc(30 / 16 * 1rem);
}

.c-accordion__answer {
  padding-left: 1.5em;
  position: relative;
}
.c-accordion__answer::before {
  content: "A.";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.c-angle {
  display: inline-block;
  width: calc(20 / 16 * 1rem);
  height: 2px;
  background: currentColor;
  position: relative;
}
.c-angle::before, .c-angle::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: currentColor;
  position: absolute;
  right: 0;
  border-radius: 10px;
}
.c-angle::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  top: 0;
}
.c-angle::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  top: 0;
}
.c-angle.--mm {
  width: calc(25 / 16 * 1rem);
}
.c-angle.--sm {
  width: calc(15 / 16 * 1rem);
}
.c-angle.--ss {
  width: calc(11 / 16 * 1rem);
}

.c-btn {
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  outline-offset: 2px;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.c-btn:focus-visible {
  outline-offset: 2px;
}

.c-ctaFixed {
  position: fixed;
  bottom: calc(50 / 16 * 1rem);
  right: calc(-20 / 16 * 1rem);
  z-index: 10;
  -webkit-animation: upDown0 3s ease-in-out infinite;
          animation: upDown0 3s ease-in-out infinite;
}

.c-ctaFixed__btn {
  display: block;
  width: calc(215 / 16 * 1rem);
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}
.c-ctaFixed__btn img {
  width: 100%;
  height: auto;
}

.c-efficacyAccordion {
  background: var(--gradient2-180-50);
  padding-block: calc(25 / 16 * 1rem);
  padding-inline: calc(50 / 16 * 1rem);
  border-radius: 10px;
}

.c-efficacyAccordion__btn {
  display: grid;
  grid-template-columns: 43% 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  min-height: calc(80 / 16 * 1rem);
}

.c-efficacyAccordion__btn_title {
  font-size: calc(30 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.6;
  color: var(--blue);
  text-align: center;
  border-left: 2px dotted var(--border);
  border-right: 2px dotted var(--border);
  padding-inline: calc(20 / 16 * 1rem);
}

.c-efficacyAccordion__btn_text {
  font-size: calc(20 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.8;
  padding-inline: calc(33 / 16 * 1rem);
}

.c-efficacyAccordion__btn_plus {
  width: calc(50 / 16 * 1rem);
  aspect-ratio: 1/1;
  background: var(--white);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--blue);
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-efficacyAccordion__btn_plus::before, .c-efficacyAccordion__btn_plus::after {
  content: "";
  display: block;
  width: 50%;
  height: 4px;
  background: currentColor;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: -webkit-transform var(--duration);
  transition: -webkit-transform var(--duration);
  transition: transform var(--duration);
  transition: transform var(--duration), -webkit-transform var(--duration);
}
.c-efficacyAccordion__btn_plus::before {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.c-efficacyAccordion__btn_plus::after {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.c-efficacyAccordion__btn.is_open .c-efficacyAccordion__btn_plus::before {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.c-efficacyAccordion__body {
  -webkit-margin-before: calc(28 / 16 * 1rem);
          margin-block-start: calc(28 / 16 * 1rem);
}

.c-efficacyAccordion__answer {
  padding: calc(40 / 16 * 1rem) calc(50 / 16 * 1rem);
  background: var(--white);
  border-radius: 10px;
}

.c-efficacy__answerText {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
}

.c-efficacyAccordion__answerMedia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: calc(50 / 16 * 1rem);
}

.c-efficacyAccordion__answerMediaContent1 {
  display: grid;
  gap: calc(20 / 16 * 1rem);
}

.c-efficacyAccordion__answerMediaImg img {
  width: 100%;
  height: auto;
}

.c-efficacyAccordion__answerCaption {
  font-size: calc(12 / 16 * 1rem);
  line-height: 2;
  font-weight: var(--bold);
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  text-align: center;
}

.c-efficacyAccordion__answerMediaTitle {
  font-size: calc(22 / 16 * 1rem);
  line-height: 1;
  font-weight: var(--bold);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.c-efficacyAccordion__answerMediaTitle span {
  position: relative;
  z-index: 2;
}
.c-efficacyAccordion__answerMediaTitle::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(8 / 16 * 1rem);
  background: var(--gradient2);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.c-efficacyAccordion__answerLists {
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(10 / 16 * 1rem) calc(20 / 16 * 1rem);
}

.c-efficacyAccordion__answerList {
  font-size: calc(14 / 16 * 1rem);
  font-weight: var(--bold);
  padding-inline: calc(20 / 16 * 1rem);
  color: var(--blue);
  position: relative;
  padding-left: calc(20 / 16 * 1rem);
}
.c-efficacyAccordion__answerList::before {
  content: "";
  display: block;
  width: calc(14 / 16 * 1rem);
  aspect-ratio: 1/1;
  background: var(--gradient);
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
}

.c-pointAccordion {
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  background: var(--gradient2-180-50);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: calc(530 / 16 * 1rem);
  border-radius: 10px;
  overflow: hidden;
}

.c-pointAccordion__btn {
  padding: calc(50 / 16 * 1rem) calc(10 / 16 * 1rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: calc(117 / 16 * 1rem);
  position: relative;
  color: var(--white);
  border: none;
  -webkit-transition: background var(--duration), color var(--duration);
  transition: background var(--duration), color var(--duration);
}
.c-pointAccordion__btn:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gradient-180);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}
.c-pointAccordion__btn[aria-expanded=true] {
  background: transparent;
  color: var(--blue);
}
.c-pointAccordion__btn[aria-expanded=true]:before {
  opacity: 0;
}

.c-pointAccordion__btn_title {
  font-size: calc(22 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.8181818182;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: relative;
  z-index: 2;
}

.c-pointAccordion__btn_plus {
  width: calc(50 / 16 * 1rem);
  aspect-ratio: 1/1;
  background: var(--white);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--blue);
  position: absolute;
  left: 50%;
  bottom: calc(38 / 16 * 1rem);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.3s var(--duration);
  transition: -webkit-transform 0.3s var(--duration);
  transition: transform 0.3s var(--duration);
  transition: transform 0.3s var(--duration), -webkit-transform 0.3s var(--duration);
}
.c-pointAccordion__btn_plus::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  -webkit-mask: url(../../assets/images/common/icon_arrow_blue.svg) no-repeat center center/contain;
          mask: url(../../assets/images/common/icon_arrow_blue.svg) no-repeat center center/contain;
  background-color: currentColor;
}

.c-pointAccordion__body {
  display: grid;
  grid-template-columns: 0fr;
  -webkit-transition: 250ms grid-template-columns ease, 250ms padding-inline ease;
  transition: 250ms grid-template-columns ease, 250ms padding-inline ease;
  transition: 250ms grid-template-columns ease, 250ms padding-inline ease, 250ms -ms-grid-columns ease;
}
.c-pointAccordion__body[aria-hidden=false] {
  grid-template-columns: 1fr;
}
.c-pointAccordion__body > div {
  overflow: hidden;
}

.c-pointAccordion__answer {
  padding: calc(50 / 16 * 1rem);
  position: relative;
  height: 100%;
}
.c-pointAccordion__answer::before {
  content: "";
  display: block;
  width: 2px;
  height: calc(100% - calc(100 / 16 * 1rem));
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.c-pointAccordion__answerContent {
  width: calc(410 / 16 * 1rem);
}
.c-pointAccordion__answerContent + .c-pointAccordion__answerContent {
  -webkit-margin-before: calc(30 / 16 * 1rem);
          margin-block-start: calc(30 / 16 * 1rem);
}

.c-pointAccordion__answerImg {
  width: 100%;
}
.c-pointAccordion__answerImg img {
  width: 100%;
  height: auto;
}

.c-pointAccordion__answerText {
  font-size: calc(15 / 16 * 1rem);
  font-weight: var(--bold);
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
}

.c-qaAccordion__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(30 / 16 * 1rem);
  width: 100%;
  font-size: calc(28 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.4285714286;
  cursor: pointer;
  color: var(--blue);
}
.c-qaAccordion__btn::-webkit-details-marker {
  display: none;
}

.c-qaAccordion__btn_title {
  width: 100%;
  font-weight: var(--large);
}

.c-qaAccordion__btn_plus {
  width: calc(50 / 16 * 1rem);
  aspect-ratio: 1/1;
  background: var(--blue2);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--white);
  position: relative;
}
.c-qaAccordion__btn_plus::before, .c-qaAccordion__btn_plus::after {
  content: "";
  display: block;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: -webkit-transform var(--duration);
  transition: -webkit-transform var(--duration);
  transition: transform var(--duration);
  transition: transform var(--duration), -webkit-transform var(--duration);
}
.c-qaAccordion__btn_plus::before {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.c-qaAccordion__btn_plus::after {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.c-qaAccordion__btn.is_open .c-qaAccordion__btn_plus::before {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.c-qaAccordion__btn_icon {
  font-family: var(--outfit-font-family);
  font-size: calc(40 / 16 * 1rem);
  font-weight: var(--semi-bold);
  line-height: 1.65;
  color: var(--blue);
}

.c-qaAccordion__body {
  overflow: hidden;
  -webkit-margin-before: calc(20 / 16 * 1rem);
          margin-block-start: calc(20 / 16 * 1rem);
}

.c-qaAccordion__answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(30 / 16 * 1rem);
}
.c-qaAccordion__answer span {
  font-family: var(--outfit-font-family);
  font-size: calc(40 / 16 * 1rem);
  font-weight: var(--semi-bold);
  line-height: 1.65;
  color: var(--blue);
}

.c-qaAccordion__answerText {
  background: var(--gradient);
  padding: calc(35 / 16 * 1rem) calc(20 / 16 * 1rem);
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.6666666667;
  color: var(--white);
  font-weight: var(--bold);
  position: relative;
  border-radius: 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.c-qaAccordion__answerText::before {
  content: "";
  display: inline-block;
  width: 20px;
  aspect-ratio: 1/1;
  background: var(--light-blue3);
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
          clip-path: polygon(0 50%, 100% 0, 100% 100%);
  position: absolute;
  top: 50%;
  left: calc(-9 / 16 * 1rem);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.c-secTitle {
  font-size: calc(30 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.8;
  text-align: center;
}
.c-secTitle.is_bold {
  font-weight: var(--large);
}
.c-secTitle.is_care {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_care .c-secTitle__main {
  font-size: calc(43 / 16 * 1rem);
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
}
.c-secTitle.is_know {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_know .c-secTitle__main {
  font-size: calc(43 / 16 * 1rem);
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
}
.c-secTitle.is_voice {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_voice .c-secTitle__main {
  font-size: calc(40 / 16 * 1rem);
  letter-spacing: 0.06em;
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(30 / 16 * 1rem);
}
.c-secTitle.is_efficacy {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_efficacy .c-secTitle__main {
  font-size: calc(40 / 16 * 1rem);
  letter-spacing: 0.06em;
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(50 / 16 * 1rem);
}
.c-secTitle.is_massage {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_massage .c-secTitle__main {
  font-size: calc(40 / 16 * 1rem);
  letter-spacing: 0.06em;
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(30 / 16 * 1rem);
}
.c-secTitle.is_qa {
  line-height: 2.8;
  font-weight: var(--large);
}
.c-secTitle.is_qa .c-secTitle__main {
  font-size: calc(40 / 16 * 1rem);
  letter-spacing: 0.06em;
  font-weight: var(--large);
  -webkit-margin-end: calc(10 / 16 * 1rem);
          margin-inline-end: calc(10 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(40 / 16 * 1rem);
}
.c-secTitle .c-secTitle__main {
  display: inline-block;
  font-size: calc(50 / 16 * 1rem);
  padding-inline: calc(15 / 16 * 1rem);
  line-height: 1.3;
  font-weight: var(--medium);
}
.c-secTitle .c-secTitle__main--sm {
  font-size: calc(40 / 16 * 1rem);
  line-height: 1.5;
}
.c-secTitle small {
  font-size: calc(20 / 16 * 1rem);
  line-height: 2.7;
  display: block;
}
.c-secTitle.c-secTitle--white {
  color: var(--white);
}
.c-secTitle.c-secTitle--white .c-secTitle__main {
  background: var(--white);
  color: var(--blue);
}
.c-secTitle.c-secTitle--black .c-secTitle__main {
  background: var(--gradient);
  color: var(--white);
}

.c-tradeMark {
  position: relative;
  display: inline-block !important;
  line-height: 1.5 !important;
}
.c-tradeMark span {
  display: inline-block !important;
}
.c-tradeMark .row {
  -webkit-transform: translateY(-0.2em);
          transform: translateY(-0.2em);
}
.c-tradeMark.is_title::after {
  left: 34.7%;
}
.c-tradeMark.is_title .copy {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: calc(10 / 16 * 1rem);
  letter-spacing: 0;
}

.c-tradeMark_sm {
  position: relative;
  -webkit-padding-end: 0.4em;
          padding-inline-end: 0.4em;
  display: inline-block !important;
}

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

.l-inner--s {
  max-width: calc(var(--inner-s) + var(--padding-pc) * 2);
}

.l-parts {
  width: 100%;
  height: 100%;
  background-color: #9cdbe8;
  padding: calc(100 / 16 * 1rem) 0;
}

.l-parts__sec {
  padding: calc(50 / 16 * 1rem) 0;
}

.p-about {
  padding-block: calc(336 / 16 * 1rem) calc(400 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  -webkit-margin-before: calc(-200 / 16 * 1rem);
          margin-block-start: calc(-200 / 16 * 1rem);
}

.p-about__body {
  -webkit-margin-before: calc(100 / 16 * 1rem);
          margin-block-start: calc(100 / 16 * 1rem);
}

.p-about__items {
  display: grid;
  gap: calc(90 / 16 * 1rem);
}

.p-about__item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(30 / 16 * 1rem);
}

.p-about__itemImg img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.p-about__itemTitle {
  font-size: calc(24 / 16 * 1rem);
  line-height: 1.6666666667;
  font-weight: var(--large);
  color: var(--blue);
}

.p-about__itemText {
  font-size: calc(16 / 16 * 1rem);
  line-height: 2;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  -webkit-padding-before: calc(10 / 16 * 1rem);
          padding-block-start: calc(10 / 16 * 1rem);
  border-top: 2px dotted var(--border);
  font-weight: var(--medium);
}
.p-about__itemText small {
  display: block;
  line-height: 1.8;
}

.p-about__back {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: -1;
}
.p-about__back img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-ask {
  position: relative;
  padding-block: calc(180 / 16 * 1rem) calc(260 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.p-ask__head {
  text-align: center;
}

.p-ask__title {
  font-size: calc(50 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.74;
  color: var(--white);
}

.p-ask__body {
  -webkit-margin-before: calc(80 / 16 * 1rem);
          margin-block-start: calc(80 / 16 * 1rem);
}

.p-ask__contents {
  display: grid;
  max-width: calc(1060 / 16 * 1rem);
  margin-inline: auto;
}

.p-ask__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(50 / 16 * 1rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-ask__items:nth-child(even) {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.p-ask__items:not(:first-child) {
  -webkit-margin-before: calc(-27 / 16 * 1rem);
          margin-block-start: calc(-27 / 16 * 1rem);
}

.p-ask__items-sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(50 / 16 * 1rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-ask__item-main {
  width: calc(302 / 16 * 1rem);
}
.p-ask__item-main img {
  display: block;
  width: 100%;
  height: auto;
}

.p-ask__item-sub {
  width: calc(221 / 16 * 1rem);
  position: relative;
}
.p-ask__item-sub img {
  display: block;
  width: 100%;
  height: auto;
}

.p-ask__item-sub-text {
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.8888888889;
  color: var(--white);
  font-weight: var(--bold);
  text-align: center;
}
.p-ask__item-sub-text strong {
  font-size: calc(23 / 16 * 1rem);
  line-height: 1.4166666667;
  font-weight: var(--bold);
}

.p-ask__back {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
.p-ask__back img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.p-care {
  padding-block: calc(300 / 16 * 1rem) calc(100 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  -webkit-margin-before: calc(-150 / 16 * 1rem);
          margin-block-start: calc(-150 / 16 * 1rem);
}

.p-care__head {
  text-align: center;
}

.p-care__body {
  -webkit-margin-before: calc(80 / 16 * 1rem);
          margin-block-start: calc(80 / 16 * 1rem);
}

.p-care__cta {
  -webkit-margin-before: calc(200 / 16 * 1rem);
          margin-block-start: calc(200 / 16 * 1rem);
}

.p-care__movie {
  -webkit-margin-before: calc(200 / 16 * 1rem);
          margin-block-start: calc(200 / 16 * 1rem);
}
.p-care__movie iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.p-cta {
  display: block;
  width: 100%;
  position: relative;
}
.p-cta img {
  width: 100%;
  height: auto;
}

.p-cta__default {
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
  position: relative;
  z-index: 2;
}

.p-cta__hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}

.p-decoImageBlock {
  position: relative;
  z-index: 3;
  -webkit-margin-before: calc(-200 / 16 * 1rem);
          margin-block-start: calc(-200 / 16 * 1rem);
  overflow: hidden;
}

.p-decoImageBlock__contents {
  -webkit-mask: url(../../assets/images/common/deco_imageBlock01_back.svg) no-repeat center center/contain;
          mask: url(../../assets/images/common/deco_imageBlock01_back.svg) no-repeat center center/contain;
}

.p-decoImageBlock__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1366/650;
}
.p-decoImageBlock__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right center;
     object-position: right center;
}
.p-decoImageBlock__img.p-decoImageBlock__img--4 img {
  -o-object-position: 100% 0;
     object-position: 100% 0;
}

.p-efficacy {
  padding-block: calc(243 / 16 * 1rem) calc(340 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  -webkit-margin-before: calc(-100 / 16 * 1rem);
          margin-block-start: calc(-100 / 16 * 1rem);
}

.p-efficacy__body {
  -webkit-margin-before: calc(100 / 16 * 1rem);
          margin-block-start: calc(100 / 16 * 1rem);
}

.p-efficacy__items {
  display: grid;
  gap: calc(10 / 16 * 1rem);
}

.p-efficacy__bottom {
  -webkit-margin-before: calc(12 / 16 * 1rem);
          margin-block-start: calc(12 / 16 * 1rem);
}

.p-efficacy__copy {
  font-size: calc(12 / 16 * 1rem);
  line-height: 2;
  font-weight: var(--medium);
}

.p-footer {
  position: relative;
}

.p-footer__wrapper {
  padding-block: calc(250 / 16 * 1rem) calc(50 / 16 * 1rem);
  position: relative;
}

.p-footer__cta {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  z-index: 2;
}

.p-footer__content {
  position: relative;
  z-index: 2;
}

.p-footer__cat {
  font-size: calc(14 / 16 * 1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
  background: var(--gradient);
  padding: calc(5 / 16 * 1rem) calc(10 / 16 * 1rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 5px;
}

.p-footer__nameText {
  -webkit-margin-before: calc(30 / 16 * 1rem);
          margin-block-start: calc(30 / 16 * 1rem);
  font-size: calc(28 / 16 * 1rem);
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--white);
}
.p-footer__nameText span {
  font-family: var(--outfit-font-family);
  font-size: calc(32 / 16 * 1rem);
  line-height: 1.09375;
  font-weight: var(--medium);
}

.p-footer__nameRuby {
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.6153846154;
  color: var(--white);
}

.p-footer__address {
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.1111111111;
  letter-spacing: 0.05em;
  color: var(--white);
  -webkit-margin-before: calc(20 / 16 * 1rem);
          margin-block-start: calc(20 / 16 * 1rem);
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.p-footer__telBlock {
  -webkit-margin-before: calc(20 / 16 * 1rem);
          margin-block-start: calc(20 / 16 * 1rem);
  display: grid;
  gap: calc(1 / 16 * 1rem);
}

.p-footer__tel {
  font-size: calc(22 / 16 * 1rem);
  line-height: 1.3636363636;
  letter-spacing: 0.05em;
  color: var(--white);
  font-family: var(--outfit-font-family);
  font-weight: var(--normal);
}
.p-footer__tel a {
  text-decoration: underline;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.p-footer__bottom {
  -webkit-margin-before: calc(200 / 16 * 1rem);
          margin-block-start: calc(200 / 16 * 1rem);
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-footer__bottomTxt {
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.5;
  color: var(--white);
}

.p-footer__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-footer__menuItem {
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.75;
  color: var(--white);
  padding-inline: calc(17 / 16 * 1rem);
  border-right: 1px solid var(--white);
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}
.p-footer__menuItem:last-child {
  border-right: none;
}

.p-footer__mov {
  position: absolute;
  inset: 0;
  background-color: var(--black);
}
.p-footer__mov video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-footer__mov::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--base-color) 50%, transparent);
  z-index: 1;
}

.p-info {
  background: var(--gray);
  position: relative;
}
.p-info::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(110 / 16 * 1rem);
  background: url(../../assets/images/common/back_wave_gray.webp) no-repeat center center/contain;
  background-size: max(100%, 1366 / 16 * 1rem) calc(110 / 16 * 1rem);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -97%);
          transform: translate(-50%, -97%);
  z-index: 3;
}

.p-info__wrapper {
  padding-block: calc(116 / 16 * 1rem) calc(0 / 16 * 1rem);
  position: relative;
  overflow: hidden;
}

.p-info__contents {
  display: grid;
  grid-template-columns: 54.9048316252% 1fr;
  gap: calc(20 / 16 * 1rem);
  position: relative;
  z-index: 3;
}

.p-info__head {
  position: relative;
  z-index: 5;
}

.p-info__text {
  font-size: calc(20 / 16 * 1rem);
  line-height: 3;
  color: var(--white);
  font-weight: var(--bold);
  letter-spacing: 0.05em;
}
.p-info__text strong {
  font-size: calc(22 / 16 * 1rem);
  line-height: 2.7272727273;
  background-image: var(--gradient);
  padding-block: calc(5 / 16 * 1rem);
  padding-inline: calc(5 / 16 * 1rem);
  -webkit-margin-end: calc(5 / 16 * 1rem);
          margin-inline-end: calc(5 / 16 * 1rem);
  background-size: 0 90%, 100% 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  -webkit-transition: background-size 0.3s, color 0.3s;
  transition: background-size 0.3s, color 0.3s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  color: transparent;
}
.p-info__text.is_active strong {
  background-size: 100% 90%;
  background-position: bottom left;
  color: var(--white);
}
.p-info__text.st_margin {
  -webkit-margin-before: calc(59 / 16 * 1rem);
          margin-block-start: calc(59 / 16 * 1rem);
}

.p-info__body {
  -webkit-margin-before: calc(-50 / 16 * 1rem);
          margin-block-start: calc(-50 / 16 * 1rem);
}

.p-info__img {
  width: calc(490 / 16 * 1rem);
  margin-inline: auto;
  position: relative;
  z-index: 3;
}
.p-info__img img {
  width: 100%;
  height: auto;
}

.p-info__imgback {
  width: calc(779 / 16 * 1rem);
  aspect-ratio: 1/1;
  position: absolute;
  background: radial-gradient(circle, #cbd5e1 0%, rgba(203, 213, 225, 0.95) 10%, rgba(203, 213, 225, 0.85) 20%, rgba(203, 213, 225, 0.7) 30%, rgba(203, 213, 225, 0.5) 40%, rgba(203, 213, 225, 0.3) 50%, rgba(203, 213, 225, 0.1) 60%, rgba(100, 116, 140, 0.3) 70%, rgba(100, 116, 140, 0.7) 80%, #64748c 90%, #64748c 100%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.p-info__imgback img {
  width: 100%;
  height: auto;
}

.p-info__slide {
  position: absolute;
  bottom: calc(-25 / 16 * 1rem);
  left: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  height: calc(300 / 16 * 1rem);
}

.p-info__slideText {
  font-family: var(--outfit-font-family);
  font-size: calc(180 / 16 * 1rem);
  line-height: 1;
  font-weight: var(--thin);
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  will-change: transform;
  -webkit-animation: marqueeSlide 120s linear infinite;
          animation: marqueeSlide 120s linear infinite;
}

.p-info__slideText_main {
  display: block;
  color: var(--light-blue2);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: 4rem;
}

.p-info__slideText_sub {
  display: block;
  color: color-mix(in srgb, var(--base-color) 15%, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transform: translateY(75%) scaleY(-1);
          transform: translateY(75%) scaleY(-1);
}
.p-info__slideText_sub::after {
  content: "";
  display: block;
  width: 100%;
  height: 65%;
  position: absolute;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, var(--gray)), to(transparent));
  background: linear-gradient(to bottom, var(--gray) 70%, transparent);
  top: 0;
  left: 0;
}

@-webkit-keyframes marqueeSlide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes marqueeSlide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.p-info__deco {
  width: calc(650 / 16 * 1rem);
  position: absolute;
  top: calc(-47 / 16 * 1rem);
  left: calc(-327 / 16 * 1rem);
  z-index: 1;
}
.p-info__deco img {
  width: 100%;
  height: auto;
}

.p-know {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.p-know__wrapper {
  padding-block: calc(211 / 16 * 1rem) calc(263 / 16 * 1rem);
  position: relative;
}

.p-know__mid {
  -webkit-margin-before: calc(27 / 16 * 1rem);
          margin-block-start: calc(27 / 16 * 1rem);
}

.p-know__text {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
}
.p-know__text small {
  display: block;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  font-size: calc(12 / 16 * 1rem);
  line-height: 2.6666666667;
}

.p-know__body {
  -webkit-margin-before: calc(72 / 16 * 1rem);
          margin-block-start: calc(72 / 16 * 1rem);
  max-width: calc(760 / 16 * 1rem);
  margin-inline: auto;
}

.p-know__subTitle {
  position: relative;
}
.p-know__subTitle::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--gradient);
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-know__subTitle span {
  display: block;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: calc(24 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.75;
  color: var(--blue);
  padding-inline: calc(40 / 16 * 1rem);
  background: var(--white);
  position: relative;
  z-index: 2;
}

.p-know__items {
  -webkit-margin-before: calc(26 / 16 * 1rem);
          margin-block-start: calc(26 / 16 * 1rem);
}

.p-know__item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 / 16 * 1rem);
  padding-block: calc(48 / 16 * 1rem);
  position: relative;
}
.p-know__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--gradient2);
  position: absolute;
  bottom: 0;
  left: 0;
}
.p-know__item:last-child::before {
  display: none;
}

.p-know__itemTitle {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.p-know__itemTitle p {
  font-size: calc(22 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.3636363636;
  position: relative;
  z-index: 2;
}
.p-know__itemTitle::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(10 / 16 * 1rem);
  background: var(--gradient2);
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-know__itemText {
  -webkit-margin-before: calc(20 / 16 * 1rem);
          margin-block-start: calc(20 / 16 * 1rem);
}

.p-know__itemImg img {
  width: 100%;
  height: auto;
}

.p-know__itemCaption {
  display: block;
  font-size: calc(12 / 16 * 1rem);
  font-weight: var(--bold);
  text-align: center;
  line-height: 2;
}

.p-know__deco1 {
  position: fixed;
  top: calc(372 / 16 * 1rem);
  left: calc(-223 / 16 * 1rem);
  width: calc(480 / 16 * 1rem);
  z-index: -1;
}
.p-know__deco1 img {
  display: block;
  width: 100%;
  height: auto;
}

.p-know__deco2 {
  position: fixed;
  top: calc(20 / 16 * 1rem);
  right: calc(-489 / 16 * 1rem);
  width: calc(823 / 16 * 1rem);
  z-index: -1;
}
.p-know__deco2 img {
  display: block;
  width: 100%;
  height: auto;
}

.p-massage {
  background: url(../../assets/images/common/back_wave_green_vh3.webp) no-repeat center top/cover;
  position: relative;
  -webkit-margin-before: calc(-120 / 16 * 1rem);
          margin-block-start: calc(-120 / 16 * 1rem);
  padding-block: calc(200 / 16 * 1rem) calc(340 / 16 * 1rem);
}

.p-massage__headText {
  font-size: calc(24 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 2;
  text-align: center;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
}

.p-massage__body {
  -webkit-margin-before: calc(62 / 16 * 1rem);
          margin-block-start: calc(62 / 16 * 1rem);
}

.p-massage__items {
  display: grid;
  gap: calc(146 / 16 * 1rem);
}

.p-massage__itemHead {
  background: var(--white);
  border-radius: 60px;
  padding: calc(20 / 16 * 1rem) calc(20 / 16 * 1rem);
  position: relative;
  z-index: 1;
}

.p-massage__itemTitle {
  font-size: calc(26 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.5384615385;
  color: var(--blue);
  text-align: center;
}
.p-massage__itemTitle strong {
  font-size: calc(36 / 16 * 1rem);
  line-height: 1.1111111111;
}

.p-massage__itemText {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

.p-massage__itemImg {
  width: calc(130 / 16 * 1rem);
  position: absolute;
  top: 0;
  right: 9.5%;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
  z-index: 2;
}
.p-massage__itemImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-massage__itemBody {
  -webkit-margin-before: calc(47 / 16 * 1rem);
          margin-block-start: calc(47 / 16 * 1rem);
}

.p-massage__Lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(62 / 16 * 1rem);
}

.p-massage__List {
  width: calc(33% - calc(62 / 16 * 1rem) * 2 / 3);
}

.p-massage__ListImg {
  aspect-ratio: 280/150;
  border-radius: 10px;
  overflow: hidden;
}
.p-massage__ListImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-massage__ListContent {
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
}

.p-massage__ListTitle {
  font-size: calc(20 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
  color: var(--white);
  text-align: center;
}

.p-massage__ListText {
  font-size: calc(16 / 16 * 1rem);
  line-height: 2;
  font-weight: var(--bold);
  -webkit-margin-before: calc(3 / 16 * 1rem);
          margin-block-start: calc(3 / 16 * 1rem);
  color: var(--white);
}

.p-mv {
  position: relative;
  overflow: hidden;
}

.p-mv__contents {
  position: relative;
  padding-block: calc(200 / 16 * 1rem) calc(219 / 16 * 1rem);
  max-width: calc(1366 / 16 * 1rem);
  margin-inline: auto;
}

.p-mv__head {
  display: grid;
  position: relative;
  z-index: 3;
}

.p-mv__text1 {
  font-size: calc(30 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2.3333333333;
  color: var(--light-blue);
  letter-spacing: 0.05em;
}
.p-mv__text1 span {
  font-size: calc(40 / 16 * 1rem);
  line-height: 1.75;
}

.p-mv__text2 {
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.7222222222;
  font-weight: var(--bold);
  color: var(--light-blue);
}
.p-mv__text2 span {
  color: var(--white);
  background: var(--gradient);
  padding-inline: calc(10 / 16 * 1rem);
}

.p-mv__body {
  -webkit-margin-before: calc(57 / 16 * 1rem);
          margin-block-start: calc(57 / 16 * 1rem);
  position: relative;
  z-index: 3;
}

.p-mv__title {
  font-family: var(--optima-font-family);
  font-size: calc(100 / 16 * 1rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.05em;
  margin: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.p-mv__title img {
  width: calc(684 / 16 * 1rem);
  height: auto;
}

.p-mv__title_ruby {
  display: block;
  font-family: var(--base-font-family);
  font-size: calc(14 / 16 * 1rem);
  color: var(--white);
  line-height: 1.7142857143;
  text-align: right;
  -webkit-margin-before: calc(-15 / 16 * 1rem);
          margin-block-start: calc(-15 / 16 * 1rem);
  letter-spacing: 0;
}

.p-mv__text3 {
  font-size: calc(22 / 16 * 1rem);
  line-height: 1.6363636364;
  color: var(--white);
  font-weight: var(--bold);
  -webkit-margin-before: calc(20 / 16 * 1rem);
          margin-block-start: calc(20 / 16 * 1rem);
}

.p-mv__text4 {
  font-family: var(--outfit-font-family);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.75;
  color: var(--white);
  letter-spacing: 0.05em;
  font-weight: var(--medium);
  -webkit-margin-before: calc(3 / 16 * 1rem);
          margin-block-start: calc(3 / 16 * 1rem);
}

.p-mv__img {
  position: absolute;
  top: calc(-16 / 16 * 1rem);
  right: calc(-223 / 16 * 1rem);
  width: calc(770 / 16 * 1rem);
  z-index: 2;
}
.p-mv__img img {
  width: 100%;
  height: auto;
}

.p-mv__mov {
  position: absolute;
  inset: 0;
  background-color: var(--black);
}
.p-mv__mov video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-mv__mov::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--base-color) 50%, transparent);
  z-index: 1;
}

.p-mv__deco {
  width: calc(60 / 16 * 1rem);
  aspect-ratio: 1/1;
  position: absolute;
  z-index: 2;
  -webkit-animation: upDown1 5s ease-in-out infinite;
          animation: upDown1 5s ease-in-out infinite;
}
.p-mv__deco.p-mv__deco--lg {
  width: calc(80 / 16 * 1rem);
}
.p-mv__deco.p-mv__deco--1 {
  top: calc(309 / 16 * 1rem);
  left: calc(-20 / 16 * 1rem);
  -webkit-animation-name: upDown1;
          animation-name: upDown1;
}
.p-mv__deco.p-mv__deco--2 {
  top: calc(100 / 16 * 1rem);
  left: calc(60 / 16 * 1rem);
  -webkit-animation-name: upDown2;
          animation-name: upDown2;
}
.p-mv__deco.p-mv__deco--3 {
  top: calc(10 / 16 * 1rem);
  left: calc(195 / 16 * 1rem);
  -webkit-animation-name: upDown1;
          animation-name: upDown1;
}
.p-mv__deco.p-mv__deco--4 {
  top: calc(74 / 16 * 1rem);
  left: calc(468 / 16 * 1rem);
  -webkit-animation-name: upDown2;
          animation-name: upDown2;
}
.p-mv__deco.p-mv__deco--5 {
  top: calc(147 / 16 * 1rem);
  left: calc(612 / 16 * 1rem);
  -webkit-animation-name: upDown1;
          animation-name: upDown1;
}
.p-mv__deco.p-mv__deco--6 {
  top: calc(-29 / 16 * 1rem);
  left: calc(747 / 16 * 1rem);
  -webkit-animation-name: upDown2;
          animation-name: upDown2;
}
.p-mv__deco.p-mv__deco--7 {
  top: calc(250 / 16 * 1rem);
  left: calc(759 / 16 * 1rem);
  -webkit-animation-name: upDown1;
          animation-name: upDown1;
}
.p-mv__deco img {
  width: 100%;
}

.p-mv__poster {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-point {
  background: url(../../assets/images/common/back_wave_green_vh.webp) no-repeat center top/cover;
  position: relative;
  -webkit-margin-before: calc(-120 / 16 * 1rem);
          margin-block-start: calc(-120 / 16 * 1rem);
  padding-block: calc(137 / 16 * 1rem) calc(304 / 16 * 1rem);
}

.p-point__mig {
  -webkit-margin-before: calc(84 / 16 * 1rem);
          margin-block-start: calc(84 / 16 * 1rem);
}

.p-point__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(47 / 16 * 1rem);
}

.p-point__item {
  position: relative;
}

.p-point__itemNumber {
  width: calc(90 / 16 * 1rem);
  aspect-ratio: 79/100;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
          transform: translate(-50%, -40%);
  z-index: 2;
}
.p-point__itemNumber img {
  width: 100%;
  height: auto;
}

.p-point__itemContent {
  background: var(--white);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: calc(82 / 16 * 1rem) calc(30 / 16 * 1rem) calc(40 / 16 * 1rem);
  -webkit-transition: -webkit-transform 0.3s var(--duration);
  transition: -webkit-transform 0.3s var(--duration);
  transition: transform 0.3s var(--duration);
  transition: transform 0.3s var(--duration), -webkit-transform 0.3s var(--duration);
}

.p-point__item_title {
  font-size: calc(18 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.6666666667;
  color: var(--blue);
  text-align: center;
}

.p-point__item_text {
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  -webkit-padding-before: calc(10 / 16 * 1rem);
          padding-block-start: calc(10 / 16 * 1rem);
  border-top: 1px solid var(--blue);
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.75;
  text-align: center;
}

.p-point__body {
  -webkit-margin-before: calc(95 / 16 * 1rem);
          margin-block-start: calc(95 / 16 * 1rem);
}

.p-point__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(54 / 16 * 1rem);
}

.p-point__mediaText {
  font-size: calc(16 / 16 * 1rem);
  line-height: 2;
  color: var(--white);
}
.p-point__mediaText small {
  display: block;
  font-size: calc(12 / 16 * 1rem);
  -webkit-margin-before: calc(18 / 16 * 1rem);
          margin-block-start: calc(18 / 16 * 1rem);
}
.p-point__mediaImg img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.p-pointAccordionItems {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(20 / 16 * 1rem);
}

.p-qa {
  padding-block: calc(250 / 16 * 1rem) calc(400 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  -webkit-margin-before: calc(-100 / 16 * 1rem);
          margin-block-start: calc(-100 / 16 * 1rem);
}

.p-qa__body {
  -webkit-margin-before: calc(100 / 16 * 1rem);
          margin-block-start: calc(100 / 16 * 1rem);
}

.p-qa__items {
  display: grid;
  gap: calc(65 / 16 * 1rem);
}

.p-qa__back {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: -1;
}
.p-qa__back img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-reason {
  background: url(../../assets/images/common/back_wave_green_vh2.webp) no-repeat center top/cover;
  position: relative;
  -webkit-margin-before: calc(-120 / 16 * 1rem);
          margin-block-start: calc(-120 / 16 * 1rem);
  padding-block: calc(184 / 16 * 1rem) calc(339 / 16 * 1rem);
}

.p-reason__head {
  text-align: center;
}

.p-reason__body {
  -webkit-margin-before: calc(34 / 16 * 1rem);
          margin-block-start: calc(34 / 16 * 1rem);
}

.p-reason__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 / 16 * 1rem);
}

.p-reason__img {
  width: calc(150 / 16 * 1rem);
  margin-inline: auto;
}
.p-reason__img img {
  width: 100%;
  height: auto;
}

.p-reason__itemContent {
  border: 1px solid var(--white);
  border-radius: 10px;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  overflow: hidden;
}

.p-reason__itemTitle {
  font-size: calc(20 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.5;
  padding-block: calc(5 / 16 * 1rem);
  color: var(--blue);
  background: var(--white);
  text-align: center;
}

.p-reason__itemBody {
  padding: calc(13 / 16 * 1rem) calc(20 / 16 * 1rem);
}

.p-reason__itemText {
  font-size: calc(18 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.7777777778;
  color: var(--white);
}

.p-reason__lists {
  -webkit-margin-before: calc(5 / 16 * 1rem);
          margin-block-start: calc(5 / 16 * 1rem);
  display: grid;
}

.p-reason__list {
  font-size: calc(15 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 2.1333333333;
  color: var(--white);
  position: relative;
}

.p-reason__bottom {
  -webkit-margin-before: calc(200 / 16 * 1rem);
          margin-block-start: calc(200 / 16 * 1rem);
}

.p-reason__text {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
  color: var(--white);
}
.p-reason__text small {
  display: block;
  font-size: calc(12 / 16 * 1rem);
  line-height: 2.6666666667;
}

.p-reason__bottomBody {
  -webkit-margin-before: calc(24 / 16 * 1rem);
          margin-block-start: calc(24 / 16 * 1rem);
}

.p-series {
  padding-block: calc(100 / 16 * 1rem) calc(350 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.p-series__media {
  display: grid;
  gap: calc(53 / 16 * 1rem);
}

.p-series__mediaItem {
  display: grid;
  grid-template-columns: calc(200 / 16 * 1rem) 1fr;
  gap: calc(59 / 16 * 1rem);
}
.p-series__mediaItemImg img {
  width: 100%;
  height: auto;
}

.p-series__mediaItemTitle {
  font-size: calc(24 / 16 * 1rem);
  font-weight: var(--medium);
  line-height: 1.25;
}

.p-series__mediaItemMainText {
  font-size: calc(30 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.6666666667;
  color: var(--blue);
}

.p-series__mediaBody {
  -webkit-margin-before: calc(7 / 16 * 1rem);
          margin-block-start: calc(7 / 16 * 1rem);
  -webkit-padding-before: calc(7 / 16 * 1rem);
          padding-block-start: calc(7 / 16 * 1rem);
  border-top: 2px dotted var(--border);
}

.p-series__mediaText {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
}
.p-series__mediaText span {
  display: block;
}
.p-series__mediaText a {
  text-decoration: underline;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.p-series__bottom {
  -webkit-margin-before: calc(50 / 16 * 1rem);
          margin-block-start: calc(50 / 16 * 1rem);
}

.p-series__bottomContents {
  display: grid;
  gap: calc(100 / 16 * 1rem);
}

.p-series__bottomContent {
  display: grid;
  grid-template-columns: calc(200 / 16 * 1rem) 1fr;
  gap: calc(50 / 16 * 1rem);
}
.p-series__bottomContent::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.p-series__bottomImg {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  position: relative;
}
.p-series__bottomImg img {
  width: 100%;
  height: auto;
}

.p-series__bottomTextWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(43 / 16 * 1rem) calc(57 / 16 * 1rem);
}

.p-series__bottomTextMain {
  font-size: calc(20 / 16 * 1rem);
  font-weight: var(--large);
  line-height: 1.5;
}

.p-series__bottomText {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.875;
  -webkit-margin-before: calc(13 / 16 * 1rem);
          margin-block-start: calc(13 / 16 * 1rem);
}

.p-voice {
  padding-block: calc(348 / 16 * 1rem) calc(300 / 16 * 1rem);
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  -webkit-margin-before: calc(-200 / 16 * 1rem);
          margin-block-start: calc(-200 / 16 * 1rem);
}

.p-voice__body {
  -webkit-margin-before: calc(98 / 16 * 1rem);
          margin-block-start: calc(98 / 16 * 1rem);
}

.p-voice__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 / 16 * 1rem) calc(40 / 16 * 1rem);
}

.p-voice__content {
  background: var(--white);
  border-radius: 10px;
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  min-height: calc(180 / 16 * 1rem);
  display: grid;
  place-content: center;
  padding: calc(20 / 16 * 1rem);
  position: relative;
}
.p-voice__content::after {
  content: "";
  display: inline-block;
  width: 33px;
  aspect-ratio: 33/16;
  background: inherit;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
          clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 90%);
          transform: translate(-50%, 90%);
}

.p-voice__text {
  font-size: calc(16 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 2;
}

.p-voice__imgContent {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  -webkit-margin-before: calc(30 / 16 * 1rem);
          margin-block-start: calc(30 / 16 * 1rem);
}

.p-voice__img {
  width: calc(80 / 16 * 1rem);
  margin-inline: auto;
}
.p-voice__img img {
  width: 100%;
  height: auto;
}

.p-voice__imgName {
  font-size: calc(18 / 16 * 1rem);
  font-weight: var(--bold);
  line-height: 1.7777777778;
  -webkit-margin-before: calc(10 / 16 * 1rem);
          margin-block-start: calc(10 / 16 * 1rem);
  text-align: center;
}

.p-voice__back {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: -1;
}
.p-voice__back img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-voice__cta {
  -webkit-margin-before: calc(200 / 16 * 1rem);
          margin-block-start: calc(200 / 16 * 1rem);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes SlideLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes SlideLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes SlideRight {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes SlideRight {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes upDown0 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes upDown0 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes upDown1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes upDown1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes upDown2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes upDown2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* ドロワーメニュー展開時背景固定 */

body:has(dialog[open]) {
  overflow: hidden;
}

body {
  overflow-y: scroll; /* 常にスクロールバーを表示 */
}

.siteWrapper:has(dialog[open]) {
  overflow-y: auto;
  scrollbar-gutter: stable; /* スクロールバーのスペースを常に確保する */
}

dialog[open] {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

dialog:not([open]) {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.siteWrapper {
  overflow-x: clip;
}

.siteWrapper {
  padding-top: var(--header-height);
}

.u-hover {
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}

.u-hover-white::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity var(--duration);
  transition: opacity var(--duration);
}

@media (min-width: 375px) and (max-width: 768px){
  .p-massage {
    background-size: 100% 100% !important;
  }
  .p-point {
    background-size: 100% 100% !important;
  }
  .p-reason {
    background-size: 100% 100% !important;
  }
}

@media (min-width: 769px){
  .sp_only {
    display: none;
  }
}

@media (min-width: 1366px){
  .p-massage {
    background-size: 100% 100%;
  }
  .p-point {
    background-size: 100% 100%;
  }
  .p-reason {
    background-size: 100% 100%;
  }
}

@media (max-width: 1180px){
  html {
    font-size: clamp(10px, 16 / 1180 * 100vw, 16px);
  }
}

@media screen and (max-width: 767px){
  .u-desktop {
    display: none;
  }
  .u-mobile {
    display: block;
  }
  html {
    font-size: 16px;
  }
  .c-accordion__btn {
    font-size: calc(17 / 16 * 1rem);
    padding: calc(15 / 16 * 1rem) calc(45 / 16 * 1rem) calc(15 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-accordion__btn::before, .c-accordion__btn::after {
    right: calc(20 / 16 * 1rem);
    width: calc(20 / 16 * 1rem);
  }
  .c-accordion__body {
    padding-inline: calc(20 / 16 * 1rem);
  }
  .c-accordion__body[aria-hidden=false] {
    padding-block: calc(15 / 16 * 1rem);
  }
  .c-angle {
    width: calc(15 / 16 * 1rem);
  }
  .c-angle.--mm {
    width: calc(18 / 16 * 1rem);
  }
  .c-angle.--sm {
    width: calc(10 / 16 * 1rem);
    height: 1px;
  }
  .c-angle.--ss {
    width: calc(10 / 16 * 1rem);
    height: 1px;
  }
  .c-ctaFixed {
    bottom: calc(50 / 16 * 1rem);
    right: calc(-20 / 16 * 1rem);
  }
  .c-ctaFixed__btn {
    width: calc(150 / 16 * 1rem);
  }
  .c-efficacyAccordion {
    padding-block: calc(10 / 16 * 1rem) calc(20 / 16 * 1rem);
    padding-inline: calc(15 / 16 * 1rem);
    border-radius: 5px;
  }
  .c-efficacyAccordion__btn {
    grid-template-columns: 1fr;
    min-height: initial;
  }
  .c-efficacyAccordion__btn_title {
    border-left: none;
    border-right: none;
    padding-inline: 0;
    font-size: calc(24 / 16 * 1rem);
    text-align: left;
    min-height: calc(80 / 16 * 1rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .c-efficacyAccordion__btn_text {
    font-size: calc(16 / 16 * 1rem);
    -webkit-margin-before: calc(10 / 16 * 1rem);
            margin-block-start: calc(10 / 16 * 1rem);
    border-top: 2px dotted var(--border);
    -webkit-padding-before: calc(20 / 16 * 1rem);
            padding-block-start: calc(20 / 16 * 1rem);
    padding-inline: 0;
  }
  .c-efficacyAccordion__btn_plus {
    width: calc(37 / 16 * 1rem);
    top: calc(40 / 16 * 1rem);
  }
  .c-efficacyAccordion__btn_plus::before, .c-efficacyAccordion__btn_plus::after {
    height: 2px;
  }
  .c-efficacyAccordion__body {
    -webkit-margin-before: calc(20 / 16 * 1rem);
            margin-block-start: calc(20 / 16 * 1rem);
  }
  .c-efficacyAccordion__answer {
    padding: calc(10 / 16 * 1rem) calc(15 / 16 * 1rem);
  }
  .c-efficacyAccordion__answerMedia {
    grid-template-columns: 1fr;
    gap: calc(20 / 16 * 1rem);
  }
  .c-efficacyAccordion__answerMediaContent1 {
    gap: calc(10 / 16 * 1rem);
  }
  .c-efficacyAccordion__answerCaption {
    font-size: calc(10 / 16 * 1rem);
    -webkit-margin-before: calc(5 / 16 * 1rem);
            margin-block-start: calc(5 / 16 * 1rem);
  }
  .c-efficacyAccordion__answerMediaTitle {
    font-size: calc(18 / 16 * 1rem);
  }
  .c-efficacyAccordion__answerLists {
    grid-template-columns: 1fr;
  }
  .c-pointAccordion {
    grid-template-columns: 1fr;
    height: auto;
    width: 100%;
    background: var(--gradient2-180-50);
    border-radius: 5px;
  }
  .c-pointAccordion__btn {
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    min-height: calc(80 / 16 * 1rem);
    padding-block: calc(15 / 16 * 1rem);
    padding-inline: calc(14 / 16 * 1rem) calc(55 / 16 * 1rem);
    background: var(--gradient);
  }
  .c-pointAccordion__btn:before {
    background: var(--gradient);
  }
  .c-pointAccordion__btn[aria-expanded=true] .c-pointAccordion__btn_plus::before {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .c-pointAccordion__btn_title {
    font-size: calc(16 / 16 * 1rem);
    line-height: 1.5;
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
  }
  .c-pointAccordion__btn_plus {
    width: calc(36 / 16 * 1rem);
    bottom: initial;
    left: initial;
    top: 50%;
    right: calc(14 / 16 * 1rem);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .c-pointAccordion__btn_plus::before {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .c-pointAccordion__body {
    grid-template-rows: 0fr;
    -webkit-transition: 250ms grid-template-rows ease, 0ms grid-template-columns ease, 0ms padding-inline ease, 250ms padding-block ease;
    transition: 250ms grid-template-rows ease, 0ms grid-template-columns ease, 0ms padding-inline ease, 250ms padding-block ease;
    transition: 250ms grid-template-rows ease, 0ms grid-template-columns ease, 0ms padding-inline ease, 250ms padding-block ease, 250ms -ms-grid-rows ease, 0ms -ms-grid-columns ease;
  }
  .c-pointAccordion__body[aria-hidden=false] {
    grid-template-rows: 1fr;
  }
  .c-pointAccordion__answer {
    padding: calc(20 / 16 * 1rem) calc(14 / 16 * 1rem);
    height: auto;
  }
  .c-pointAccordion__answer::before {
    height: 2px;
    width: calc(100% - calc(14 / 16 * 1rem) * 2);
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .c-pointAccordion__answerContent {
    width: 100%;
  }
  .c-pointAccordion__answerContent + .c-pointAccordion__answerContent {
    -webkit-margin-before: calc(5 / 16 * 1rem);
            margin-block-start: calc(5 / 16 * 1rem);
  }
  .c-pointAccordion__answerText {
    font-size: calc(14 / 16 * 1rem);
  }
  .c-qaAccordion__btn {
    font-size: calc(16 / 16 * 1rem);
    gap: calc(15 / 16 * 1rem);
  }
  .c-qaAccordion__btn_icon {
    font-size: calc(35 / 16 * 1rem);
  }
  .c-qaAccordion__answer {
    gap: calc(15 / 16 * 1rem);
  }
  .c-qaAccordion__answer span {
    font-size: calc(35 / 16 * 1rem);
  }
  .c-qaAccordion__answerText {
    font-size: calc(16 / 16 * 1rem);
    padding: calc(20 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-secTitle {
    font-size: calc(22 / 16 * 1rem);
  }
  .c-secTitle.is_care {
    line-height: 1.8;
  }
  .c-secTitle.is_care .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
  }
  .c-secTitle.is_know {
    line-height: 1.8;
  }
  .c-secTitle.is_know .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
  }
  .c-secTitle.is_voice {
    line-height: 1.8;
  }
  .c-secTitle.is_voice .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
    padding: calc(8 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-secTitle.is_efficacy {
    line-height: 1.8;
  }
  .c-secTitle.is_efficacy .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
    padding: calc(8 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-secTitle.is_massage {
    line-height: 1.8;
  }
  .c-secTitle.is_massage .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
    padding: calc(8 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-secTitle.is_qa {
    line-height: 1.8;
  }
  .c-secTitle.is_qa .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
    padding: calc(8 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .c-secTitle .c-secTitle__main {
    font-size: calc(32 / 16 * 1rem);
    padding-inline: calc(22 / 16 * 1rem);
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
  .c-secTitle .c-secTitle__main--sm {
    font-size: calc(32 / 16 * 1rem);
  }
  .c-secTitle small {
    font-size: calc(15 / 16 * 1rem);
  }
  .c-tradeMark.is_title .copy {
    font-size: calc(8 / 16 * 1rem);
  }
  .l-inner {
    padding-inline: var(--padding-sp);
    max-width: 500px;
  }
  .p-about {
    -webkit-margin-before: calc(-100 / 16 * 1rem);
            margin-block-start: calc(-100 / 16 * 1rem);
    padding-block: calc(175 / 16 * 1rem) calc(200 / 16 * 1rem);
  }
  .p-about__body {
    -webkit-margin-before: calc(40 / 16 * 1rem);
            margin-block-start: calc(40 / 16 * 1rem);
  }
  .p-about__items {
    gap: calc(43 / 16 * 1rem);
  }
  .p-about__item {
    grid-template-columns: repeat(1, 1fr);
    gap: calc(10 / 16 * 1rem);
  }
  .p-about__itemText {
    -webkit-margin-before: calc(15 / 16 * 1rem);
            margin-block-start: calc(15 / 16 * 1rem);
    -webkit-padding-before: calc(15 / 16 * 1rem);
            padding-block-start: calc(15 / 16 * 1rem);
  }
  .p-about__itemText small {
    font-size: calc(12 / 16 * 1rem);
  }
  .p-ask {
    padding-block: calc(90 / 16 * 1rem) calc(150 / 16 * 1rem);
  }
  .p-ask__title {
    font-size: calc(22 / 16 * 1rem);
  }
  .p-ask__body {
    -webkit-margin-before: calc(17 / 16 * 1rem);
            margin-block-start: calc(17 / 16 * 1rem);
  }
  .p-ask__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(0 / 16 * 1rem) calc(35 / 16 * 1rem);
  }
  .p-ask__items:nth-child(even) {
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .p-ask__items:not(:first-child) {
    -webkit-margin-before: calc(-3 / 16 * 1rem);
            margin-block-start: calc(-3 / 16 * 1rem);
  }
  .p-ask__items:last-child {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(20 / 16 * 1rem);
  }
  .p-ask__items-sub {
    gap: calc(30 / 16 * 1rem);
  }
  .p-ask__item-main {
    width: 100%;
    max-width: calc(210 / 16 * 1rem);
  }
  .p-ask__item-sub {
    width: 100%;
    max-width: calc(153 / 16 * 1rem);
  }
  .p-ask__item-sub-text {
    font-size: calc(12 / 16 * 1rem);
  }
  .p-ask__item-sub-text strong {
    font-size: calc(15 / 16 * 1rem);
  }
  .p-care {
    -webkit-margin-before: calc(-100 / 16 * 1rem);
            margin-block-start: calc(-100 / 16 * 1rem);
    padding-block: calc(150 / 16 * 1rem) calc(100 / 16 * 1rem);
  }
  .p-care__body {
    -webkit-margin-before: calc(50 / 16 * 1rem);
            margin-block-start: calc(50 / 16 * 1rem);
  }
  .p-care__cta {
    -webkit-margin-before: calc(100 / 16 * 1rem);
            margin-block-start: calc(100 / 16 * 1rem);
  }
  .p-care__movie {
    -webkit-margin-before: calc(100 / 16 * 1rem);
            margin-block-start: calc(100 / 16 * 1rem);
  }
  .p-decoImageBlock {
    -webkit-margin-before: calc(-100 / 16 * 1rem);
            margin-block-start: calc(-100 / 16 * 1rem);
  }
  .p-decoImageBlock__contents {
    -webkit-mask: url(../../assets/images/common/deco_imageBlock01_back_sp.svg) no-repeat center center/contain;
            mask: url(../../assets/images/common/deco_imageBlock01_back_sp.svg) no-repeat center center/contain;
  }
  .p-decoImageBlock__img {
    aspect-ratio: 500/435;
  }
  .p-decoImageBlock__img img {
    -o-object-position: 74% 50%;
       object-position: 74% 50%;
  }
  .p-decoImageBlock__img.p-decoImageBlock__img--4 img {
    -o-object-position: 74% 50%;
       object-position: 74% 50%;
  }
  .p-efficacy {
    padding-block: calc(200 / 16 * 1rem) calc(200 / 16 * 1rem);
  }
  .p-efficacy__body {
    -webkit-margin-before: calc(53 / 16 * 1rem);
            margin-block-start: calc(53 / 16 * 1rem);
  }
  .p-efficacy__items {
    gap: calc(24 / 16 * 1rem);
  }
  .p-efficacy__bottom {
    -webkit-margin-before: calc(10 / 16 * 1rem);
            margin-block-start: calc(10 / 16 * 1rem);
  }
  .p-footer__wrapper {
    padding-block: calc(250 / 16 * 1rem) calc(30 / 16 * 1rem);
  }
  .p-footer__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: calc(20 / 16 * 1rem);
  }
  .p-footer__menu {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-margin-start: calc(-20 / 16 * 1rem);
            margin-inline-start: calc(-20 / 16 * 1rem);
    gap: calc(10 / 16 * 1rem) 0;
  }
  .p-footer__menuItem {
    font-size: calc(14 / 16 * 1rem);
    padding-inline: calc(20 / 16 * 1rem);
    line-height: 1;
  }
  .p-info::before {
    height: calc(55 / 16 * 1rem);
    background: url(../../assets/images/common/back_wave_gray_sp.webp) no-repeat center center/contain;
    background-size: max(100%, 375 / 16 * 1rem) calc(55 / 16 * 1rem);
  }
  .p-info__wrapper {
    padding-block: calc(63 / 16 * 1rem) calc(0 / 16 * 1rem);
  }
  .p-info__contents {
    grid-template-columns: 1fr;
    gap: calc(40 / 16 * 1rem);
  }
  .p-info__text {
    font-size: calc(21 / 16 * 1rem);
    letter-spacing: 0.02em;
  }
  .p-info__text strong {
    font-size: calc(23 / 16 * 1rem);
  }
  .p-info__text.st_margin {
    -webkit-margin-before: calc(63 / 16 * 1rem);
            margin-block-start: calc(63 / 16 * 1rem);
  }
  .p-info__body {
    -webkit-margin-before: initial;
            margin-block-start: initial;
  }
  .p-info__img {
    width: calc(320 / 16 * 1rem);
  }
  .p-info__imgback {
    width: calc(473 / 16 * 1rem);
  }
  .p-info__slide {
    bottom: calc(40 / 16 * 1rem);
    height: calc(150 / 16 * 1rem);
  }
  .p-info__slideText {
    font-size: calc(90 / 16 * 1rem);
  }
  .p-info__deco {
    width: calc(456 / 16 * 1rem);
    top: calc(8 / 16 * 1rem);
    left: calc(-180 / 16 * 1rem);
  }
  .p-know__wrapper {
    padding-block: calc(72 / 16 * 1rem) calc(120 / 16 * 1rem);
  }
  .p-know__mid {
    -webkit-margin-before: calc(20 / 16 * 1rem);
            margin-block-start: calc(20 / 16 * 1rem);
  }
  .p-know__text small {
    -webkit-margin-before: calc(13 / 16 * 1rem);
            margin-block-start: calc(13 / 16 * 1rem);
  }
  .p-know__items {
    -webkit-margin-before: calc(31 / 16 * 1rem);
            margin-block-start: calc(31 / 16 * 1rem);
  }
  .p-know__item {
    grid-template-columns: repeat(1, 1fr);
    gap: calc(12 / 16 * 1rem);
    padding-block: 0 calc(48 / 16 * 1rem);
  }
  .p-know__item::before {
    content: none;
  }
  .p-know__deco1 {
    top: calc(410 / 16 * 1rem);
    left: calc(-223 / 16 * 1rem);
    width: calc(377 / 16 * 1rem);
  }
  .p-know__deco2 {
    top: calc(75 / 16 * 1rem);
    right: calc(-401 / 16 * 1rem);
    width: calc(616 / 16 * 1rem);
  }
  .p-massage {
    background: url(../../assets/images/common/back_wave_green_vh3_sp.webp) no-repeat center top/cover;
    -webkit-margin-before: calc(-106 / 16 * 1rem);
            margin-block-start: calc(-106 / 16 * 1rem);
    padding-block: calc(172 / 16 * 1rem) calc(220 / 16 * 1rem);
  }
  .p-massage__body {
    -webkit-margin-before: calc(40 / 16 * 1rem);
            margin-block-start: calc(40 / 16 * 1rem);
  }
  .p-massage__items {
    gap: calc(80 / 16 * 1rem);
  }
  .p-massage__itemHead {
    border-radius: 30px;
    padding: calc(30 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
  .p-massage__itemTitle {
    font-size: calc(18 / 16 * 1rem);
  }
  .p-massage__itemTitle strong {
    font-size: calc(24 / 16 * 1rem);
  }
  .p-massage__itemImg {
    width: calc(80 / 16 * 1rem);
    right: 0;
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  .p-massage__itemBody {
    -webkit-margin-before: calc(30 / 16 * 1rem);
            margin-block-start: calc(30 / 16 * 1rem);
  }
  .p-massage__Lists {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
    gap: calc(30 / 16 * 1rem);
  }
  .p-massage__List {
    width: 100%;
  }
  .p-mv__contents {
    padding-block: calc(250 / 16 * 1rem) calc(100 / 16 * 1rem);
    max-width: calc(500 / 16 * 1rem);
  }
  .p-mv__text1 {
    font-size: calc(22 / 16 * 1rem);
  }
  .p-mv__text1 span {
    font-size: calc(30 / 16 * 1rem);
  }
  .p-mv__text2 {
    font-size: calc(13 / 16 * 1rem);
  }
  .p-mv__text2 span {
    padding-block: calc(3 / 16 * 1rem);
    padding-inline: calc(15 / 16 * 1rem);
  }
  .p-mv__body {
    -webkit-margin-before: calc(16 / 16 * 1rem);
            margin-block-start: calc(16 / 16 * 1rem);
  }
  .p-mv__title img {
    width: calc(283 / 16 * 1rem);
  }
  .p-mv__title {
    font-size: calc(70 / 16 * 1rem);
  }
  .p-mv__title_ruby {
    -webkit-margin-before: calc(5 / 16 * 1rem);
            margin-block-start: calc(5 / 16 * 1rem);
  }
  .p-mv__text3 {
    font-size: calc(16 / 16 * 1rem);
    -webkit-margin-before: calc(14 / 16 * 1rem);
            margin-block-start: calc(14 / 16 * 1rem);
  }
  .p-mv__text4 {
    font-size: calc(14 / 16 * 1rem);
  }
  .p-mv__img {
    top: calc(-5 / 16 * 1rem);
    right: calc(-91 / 16 * 1rem);
    width: calc(316 / 16 * 1rem);
  }
  .p-mv__deco {
    width: calc(36 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--lg {
    width: calc(48 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--1 {
    top: calc(114 / 16 * 1rem);
    left: calc(12 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--2 {
    top: calc(186 / 16 * 1rem);
    left: calc(54 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--3 {
    top: calc(17 / 16 * 1rem);
    left: calc(124 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--4 {
    top: calc(55 / 16 * 1rem);
    left: calc(59 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--5 {
    top: calc(159 / 16 * 1rem);
    left: calc(118 / 16 * 1rem);
  }
  .p-mv__deco.p-mv__deco--6 {
    display: none;
  }
  .p-mv__deco.p-mv__deco--7 {
    top: calc(111 / 16 * 1rem);
    left: calc(95 / 16 * 1rem);
  }
  .p-point {
    background: url(../../assets/images/common/back_wave_green_vh_sp.webp) no-repeat center top/cover;
    -webkit-margin-before: calc(-56 / 16 * 1rem);
            margin-block-start: calc(-56 / 16 * 1rem);
    padding-block: calc(72 / 16 * 1rem) calc(168 / 16 * 1rem);
  }
  .p-point__mig {
    -webkit-margin-before: calc(72 / 16 * 1rem);
            margin-block-start: calc(72 / 16 * 1rem);
  }
  .p-point__items {
    grid-template-columns: repeat(1, 1fr);
  }
  .p-point__itemContent {
    padding: calc(77 / 16 * 1rem) calc(30 / 16 * 1rem) calc(36 / 16 * 1rem);
  }
  .p-point__item_title {
    font-size: calc(16 / 16 * 1rem);
  }
  .p-point__item_text {
    font-size: calc(15 / 16 * 1rem);
  }
  .p-point__body {
    -webkit-margin-before: calc(50 / 16 * 1rem);
            margin-block-start: calc(50 / 16 * 1rem);
  }
  .p-point__media {
    grid-template-columns: 1fr;
    gap: calc(37 / 16 * 1rem);
  }
  .p-point__mediaContent {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .p-point__mediaImg {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .p-point__mediaImg img {
    border-radius: 5px;
  }
  .p-pointAccordionItems {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(10 / 16 * 1rem);
  }
  .p-qa {
    padding-block: calc(200 / 16 * 1rem) calc(300 / 16 * 1rem);
    -webkit-margin-before: calc(-50 / 16 * 1rem);
            margin-block-start: calc(-50 / 16 * 1rem);
  }
  .p-qa__body {
    -webkit-margin-before: calc(45 / 16 * 1rem);
            margin-block-start: calc(45 / 16 * 1rem);
  }
  .p-qa__items {
    gap: calc(30 / 16 * 1rem);
  }
  .p-reason {
    background: url(../../assets/images/common/back_wave_green_vh_sp.webp) no-repeat center top/cover;
    -webkit-margin-before: calc(-56 / 16 * 1rem);
            margin-block-start: calc(-56 / 16 * 1rem);
    padding-block: calc(72 / 16 * 1rem) calc(220 / 16 * 1rem);
  }
  .p-reason__body {
    -webkit-margin-before: calc(20 / 16 * 1rem);
            margin-block-start: calc(20 / 16 * 1rem);
  }
  .p-reason__items {
    grid-template-columns: repeat(1, 1fr);
  }
  .p-reason__bottom {
    -webkit-margin-before: calc(100 / 16 * 1rem);
            margin-block-start: calc(100 / 16 * 1rem);
  }
  .p-reason__bottomBody {
    -webkit-margin-before: calc(10 / 16 * 1rem);
            margin-block-start: calc(10 / 16 * 1rem);
  }
  .p-series {
    padding-block: calc(0 / 16 * 1rem) calc(200 / 16 * 1rem);
  }
  .p-series__media {
    gap: calc(40 / 16 * 1rem);
  }
  .p-series__mediaItem {
    grid-template-columns: 1fr;
    gap: calc(25 / 16 * 1rem);
  }
  .p-series__mediaItemImg {
    width: calc(200 / 16 * 1rem);
    margin-inline: auto;
  }
  .p-series__mediaItemTitle {
    font-size: calc(18 / 16 * 1rem);
  }
  .p-series__mediaItemMainText {
    font-size: calc(23 / 16 * 1rem);
  }
  .p-series__mediaBody {
    -webkit-margin-before: calc(17 / 16 * 1rem);
            margin-block-start: calc(17 / 16 * 1rem);
    -webkit-padding-before: calc(17 / 16 * 1rem);
            padding-block-start: calc(17 / 16 * 1rem);
  }
  .p-series__bottom {
    -webkit-margin-before: calc(20 / 16 * 1rem);
            margin-block-start: calc(20 / 16 * 1rem);
  }
  .p-series__bottomContents {
    gap: calc(15 / 16 * 1rem);
  }
  .p-series__bottomContent {
    grid-template-columns: 1fr;
    gap: calc(50 / 16 * 1rem);
  }
  .p-series__bottomContent::before {
    content: none;
  }
  .p-series__bottomContent:first-child {
    margin-inline: calc(var(--padding-sp) * -1);
  }
  .p-series__bottomTextWrap {
    padding: calc(20 / 16 * 1rem) calc(25 / 16 * 1rem);
  }
  .p-voice {
    padding-block: calc(200 / 16 * 1rem) calc(200 / 16 * 1rem);
    -webkit-margin-before: calc(-100 / 16 * 1rem);
            margin-block-start: calc(-100 / 16 * 1rem);
  }
  .p-voice__body {
    -webkit-margin-before: calc(60 / 16 * 1rem);
            margin-block-start: calc(60 / 16 * 1rem);
  }
  .p-voice__items {
    grid-template-columns: repeat(1, 1fr);
    gap: calc(40 / 16 * 1rem);
  }
  .p-voice__cta {
    -webkit-margin-before: calc(100 / 16 * 1rem);
            margin-block-start: calc(100 / 16 * 1rem);
  }
  .pc_only {
    display: none;
  }
  body:has(.c-hamburger[aria-expanded=true]) {
    overflow: hidden;
  }
  .siteWrapper {
    padding-top: var(--header-height-sp);
  }
}

@media (max-width: 375px){
  html {
    font-size: clamp(10px, 16 / 375 * 100vw, 16px);
  }
}

@media (any-hover: hover){
  .c-accordion__btn:hover {
    opacity: 0.7;
  }
  .c-ctaFixed__btn:hover {
    opacity: 0.8;
  }
  .c-pointAccordion__btn:hover {
    color: var(--blue);
  }
  .c-pointAccordion__btn:hover:before {
    opacity: 0;
  }
  .p-cta:hover .p-cta__hover {
    opacity: 1;
  }
  .p-footer__tel a:hover {
    opacity: 0.8;
  }
  .p-footer__menuItem:hover {
    opacity: 0.8;
  }
  .p-point__itemContent:hover {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  .p-series__mediaText a:hover {
    opacity: 0.8;
  }
  .u-hover:hover {
    opacity: 0.7;
  }
  .u-hover-white:hover::before {
    opacity: 0.3;
  }
}

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