@charset "UTF-8";
/* ======================================================
//  MARK: Universal
// ====================================================== */
*,
::before,
::after {
  /*
  * Includes `padding` and `border` in the element's specified dimensions.
  * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
  */
  box-sizing: border-box;
}

/* ======================================================
//  MARK: Document and Body Elements
// ====================================================== */
:where(:root) {
  /*
  * Prevents layout shift caused by the appearance or disappearance of the scrollbar.
  * Starting with Chrome 145, specifying `scrollbar-gutter: stable` will cause vw to be calculated without considering the scrollbar, which will also prevent horizontal scrolling.
  */
  scrollbar-gutter: stable;
  /* 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;
  /* 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;
  /* 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;
  /*
  * 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.
  */
  text-size-adjust: 100%;
  /* Suppresses the tap highlight on iOS. */
  -webkit-tap-highlight-color: transparent;
}

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

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

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

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

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

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

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

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

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

:where(ul, ol, menu) {
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  padding-inline-start: unset;
  /*
  * In Safari, using `list-style: none` prevents screen readers from announcing lists.
  * `list-style-type: ""` is used to hide markers without affecting accessibility.
  * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
  */
  list-style-type: "";
}

:where(dt) {
  /* It is common to display `<dt>` elements in bold, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

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

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

@media print {
  :where(pre) {
    /* Prevent text wrapping in print media. */
    text-wrap-mode: unset;
  }
}
/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

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

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

:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
  font-size: unset;
  font-variation-settings: initial;
  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
  font-feature-settings: initial;
  /*
  * Disables font ligatures for programming fonts (like Fira Code)
  * to prevent character combinations like `=>` from being rendered as a single symbol (e.g., `⇒`).
  */
  font-variant-ligatures: none;
}

:where(abbr[title]) {
  /*
  * The `<abbr>` element with the `title` attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
  * This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
  * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-inset: auto;
  cursor: help;
}

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

@media (forced-colors: active) {
  :where(mark) {
    color: HighlightText;
    /*
    * 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;
  }
}
@media print {
  :where(mark) {
    border-style: dotted;
    /*
    * Not all printers support color, and users might print in grayscale.
    * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
    */
    border-width: 1px;
  }
}
/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a) {
  /*
  * The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}

:where(a:any-link) {
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

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

:where(svg) {
  /* SVG はサイズが要素自体に内包されているため width:100% で拡大しない */
  max-inline-size: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
}

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

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

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

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

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

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

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

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

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

:where(button, input:is([type=button i], [type=submit i], [type=reset i])),
::file-selector-button {
  /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;
}

:where(button, input:is([type=button i], [type=submit i], [type=reset i]), [role=tab i], [role=button i], [role=option i]),
::file-selector-button {
  /*
  * On iOS, double-tapping a button can cause zooming, which harms usability.
  * `touch-action: manipulation` is specified to disable zooming on double-tap.
  * Third-party plugins such as Swiper sometimes use div elements with these roles as buttons, since double-tapping a div can still trigger zooming, it's advisable to specify this property.
  */
  touch-action: manipulation;
}

:where(button:enabled, label[for], select:enabled, input:is([type=button i], [type=submit i], [type=reset i], [type=radio i], [type=checkbox i]):enabled, [role=tab i], [role=button i], [role=option i]),
:where(:enabled)::file-selector-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(fieldset) {
  /*
  * Prevent fieldset from causing overflow.
  * Reset the default `min-inline-size: min-content` to prevent children from stretching fieldset.
  * @see https://github.com/twbs/bootstrap/issues/12359
  */
  min-inline-size: 0;
  padding: unset;
  /* The following default styles are often unnecessary, so they are reset. */
  margin-inline: unset;
  border: unset;
}

:where(legend) {
  /* The default `padding-inline` is often unnecessary, so it is reset. */
  padding-inline: unset;
}

:where(progress) {
  /* Resets the vertical alignment of the `<progress>` element to its initial value. */
  vertical-align: unset;
}

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

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

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

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

:root:has(:modal) {
  overflow: hidden;
}

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

:where([popover]) {
  /*
  * While the UA stylesheet's `margin` for `<dialog>` elements is useful for centering with `inset: 0`,
  * but `margin` for `popover` elements is often obstructive as they frequently use Anchor Positioning.
  */
  margin: unset;
}

/* ======================================================
//  MARK: Focus Styles
// ====================================================== */
:where(:focus, :focus-visible) {
  outline: none;
}

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

body {
  --_max-width: 2000px;
  --_min-width: 1104px;
  min-width: var(--_min-width);
  max-width: var(--_max-width);
  min-height: 100dvh;
  margin-inline: auto;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-base);
  letter-spacing: var(--letter-spacing-base);
  background-color: var(--color-brightest);
  text-size-adjust: initial;
}
@media (width <= 767px) {
  body {
    --_min-width: 750px;
  }
}
body * [data-font-family=serif] {
  font-family: var(--font-family-serif);
}
body * [data-font-family=mincho] {
  font-family: var(--font-family-mincho);
}
body * [data-color=accent] {
  --_color: var(--color-accent);
  color: var(--_color);
}
body * [data-color=accent-secondary] {
  --_color: var(--color-accent-secondary);
  color: var(--_color);
}
body * [data-color=primary] {
  --_color: var(--color-primary);
  color: var(--_color);
}

footer {
  position: sticky;
  top: 100%;
}

input,
button,
select,
textarea,
::placeholder {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-base);
  letter-spacing: var(--letter-spacing-base);
}

a {
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
}

figure {
  display: block flex;
}

picture {
  display: block flex;
}

:root {
  --color-brightest: #fff;
  --color-contrast: #8db8e3;
  --color-contrast-secondary: #fdf6ed;
  --color-base: #525b65;
  --color-main: #525b65;
  --color-accent: #f55;
  --color-accent-secondary: #cca114;
  --color-primary: #fffd97;
  --color-secondary: #ff8080;
  --color-link: #00f;
  --color-inactive: #ccc;
  --z-index-loading: 9999;
  --z-index-loading-bg: 9998;
  --z-index-burger: 9100;
  --z-index-header: 9000;
  --z-index-pagetop: 800;
  --z-index-on: 2;
  --breakpoint-md: 768px;
  --breakpoint-sm: 767px;
  --font-base-offset-top: 0.07em;
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-mincho: "Sawarabi Mincho", serif;
  --font-family-serif: "Noto Serif JP", serif;
  --font-size-base: 17px;
  --font-weight-base: 400;
  --inner-max-width: 100%;
  --inner-padding-inline: 40px;
  --letter-spacing-base: 0.04em;
  --line-height-base: calc(27 / 17);
  --transition-duration: 0.5s;
  --viewport-width: 1104px;
}
@media (width >= 768px) {
  :root {
    --inner-max-width: 1104px;
  }
}
@media (width <= 767px) {
  :root {
    --font-size-base: 28px;
    --inner-padding-inline: 30px;
    --line-height-base: calc(42 / 28);
    --viewport-width: 750px;
  }
}

/* =======================================================
footer
======================================================= */
.l-footer {
  --_background-color: var(--color-main);
  --_padding-block: 24px;
  position: relative;
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
  background-color: var(--_background-color);
}
@media (width <= 767px) {
  .l-footer {
    --_padding-block: 30px;
  }
}

.p-footer__copyright {
  --_color: var(--color-brightest);
  line-height: calc(20/12);
  color: var(--_color);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-footer__copyright {
    line-height: 1;
  }
}
.p-footer__copyright small {
  --_font-size: 12px;
  font-size: var(--_font-size);
}
@media (width <= 767px) {
  .p-footer__copyright small {
    --_font-size: 20px;
  }
}

/* =======================================================
header
======================================================= */
.l-header {
  --_padding-block: 32px;
  --_width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--_width);
  padding-block: var(--_padding-block);
}
@media (width <= 767px) {
  .l-header {
    --_padding-block: 40px;
  }
}
@media (width <= 767px) {
  .l-header .l-inner {
    --inner-padding-inline: 40px;
  }
}

.p-header__logo {
  display: block flex;
  width: fit-content;
}

/* =======================================================
inner
======================================================= */
.l-inner {
  padding-inline: var(--inner-padding-inline);
  margin-inline: auto;
}
@media (width >= 768px) {
  .l-inner {
    max-width: var(--inner-max-width);
  }
}

/* =======================================================
bold
======================================================= */
.u-bold {
  font-weight: 700;
}

/* =======================================================
note
======================================================= */
*[role=note] {
  text-indent: hanging 1em;
}
*[role=note]::before {
  content: "※";
}

/* =======================================================
u-only
======================================================= */
@media (width <= 767px) {
  .u-md {
    display: none;
  }
}

@media (width >= 768px) {
  .u-sm {
    display: none;
  }
}

/* =======================================================
underline
======================================================= */
.u-underline {
  --_percentage: calc(100% - 16 / 60 * 100%);
  background: linear-gradient(transparent var(--_percentage), var(--color-primary) var(--_percentage));
}

/* =======================================================
btn
======================================================= */
.c-btn {
  --_background-color: var(--color-accent);
  --_color: var(--color-brightest);
  --_font-size: 20px;
  --_gap: 32px;
  --_padding-block: 21px;
  --_padding-inline: 48px 32px;
  --_width: fit-content;
  display: block flex;
  gap: var(--_gap);
  align-items: center;
  width: var(--_width);
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
  padding-inline: var(--_padding-inline);
  margin-inline: auto;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(27/20);
  color: var(--_color);
  letter-spacing: 0.08em;
  background-color: var(--_background-color);
  transition-property: background-color;
  will-change: background-color;
}
@media (width <= 767px) {
  .c-btn {
    --_font-size: 32px;
    --_gap: 40px;
    --_padding-block: 30px;
    --_padding-inline: 52px;
    line-height: calc(54/32);
  }
}
.c-btn::after {
  --_height: 8px;
  --_width: 32px;
  width: var(--_width);
  height: var(--_height);
  content: "";
  background-image: url("../images/common/btn-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
  transition-property: translate;
  will-change: translate;
}
@media (width <= 767px) {
  .c-btn::after {
    --_height: 10px;
    --_width: 46px;
  }
}
.c-btn:focus-visible {
  --_background-color: oklch(from var(--color-accent) calc(l - 0.1) c h);
}
.c-btn:focus-visible::after {
  translate: 0.25em;
}
@media (any-hover: hover) {
  .c-btn:hover {
    --_background-color: oklch(from var(--color-accent) calc(l - 0.1) c h);
  }
  .c-btn:hover::after {
    translate: 0.25em;
  }
}

/* =======================================================
pagetop
======================================================= */
.c-pagetop__wrapper {
  --_width: 1104px;
  position: relative;
  width: var(--_width);
  height: 0;
  margin-inline: auto;
  text-align: right;
}
@media (width <= 767px) {
  .c-pagetop__wrapper {
    --_width: 100%;
  }
}
.c-pagetop {
  --_size: 94px;
  z-index: var(--z-index-pagetop);
  display: inline-block;
  width: var(--_size);
  height: var(--_size);
  cursor: pointer;
}
@media (width <= 767px) {
  .c-pagetop {
    --_size: 104px;
    right: 16px;
    bottom: 16px;
  }
}
.c-pagetop img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
.c-pagetop.is-fade img {
  transition: opacity 0.5s ease-in-out;
}
.c-pagetop.is-in img {
  opacity: 1;
}

/* =======================================================
title
======================================================= */
.c-title {
  --_font-size: 32px;
  --_margin-bottom: 64px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 400;
  line-height: calc(56/32);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .c-title {
    --_font-size: 36px;
    --_margin-bottom: 48px;
    line-height: calc(68/36);
  }
}
.c-title__deco {
  --_font-size: 44px;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(56/44);
}
@media (width <= 767px) {
  .c-title__deco {
    --_font-size: 48px;
    line-height: calc(68/48);
  }
}