@charset "UTF-8";
.common .corporateFooter {
  position: relative;
  background: #FFFFFF;
}

/*! 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
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  cursor: help;
}

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

@media (forced-colors: active) {
  :where(mark) {
    /*
    * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
    */
    background-color: Highlight;
    color: HighlightText;
  }
}
@media print {
  :where(mark) {
    /*
    * Not all printers support color, and users might print in grayscale.
    * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
    */
    border-width: 1px;
    border-style: dotted;
  }
}
/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a:-moz-any-link) {
  /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
  color: unset;
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
}
:where(a:any-link) {
  /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
  color: unset;
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
}

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

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

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

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

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

/* ======================================================
//  MARK: Forms
// ====================================================== */
::-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)) {
  /*
  * 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;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: normal;
}

button {
  border: none;
  margin: 0;
  padding: 0;
}

button:focus {
  outline: none;
}

/* FONT ------------------------------------------->
Thin: 100 / .w_thin
ExtraLight: 200 / .w_eLight
Light: 300 / .w_light
Regular: 400 / .w_reg
Medium: 500 / .w_med
SemiBold: 600 / .w_sBold
Bold: 700 / .w_bold
ExtraBold: 800 / .w_eBold
Black: 900 / .w_black


/*-------------------------------------------> font */
.w_thin {
  font-weight: 100;
}

.w_eLight {
  font-weight: 200;
}

.w_light {
  font-weight: 300;
}

.w_reg {
  font-weight: 400;
}

.w_med {
  font-weight: 500;
}

.w_sBold {
  font-weight: 600;
}

.w_bold {
  font-weight: 700;
}

.w_eBold {
  font-weight: 800;
}

.w_black {
  font-weight: 900;
}

.f_serif {
  font-family: "Zen Old Mincho", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.f_sans, .ja {
  font-family: "Noto Sans JP", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.f_en, .en {
  font-family: "Noto Sans JP", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/*-------------------------------------------> html / body style */
#container, * {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-variant: normal;
}

#container {
  width: 100%;
  min-width: 100%;
  height: 100%;
  background: #000;
  color: #3e2716;
  font-family: "Zen Old Mincho", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  #container .pc {
    display: block;
  }
  #container .sp {
    display: none;
  }
  #container img.pc, #container .svg.pc {
    display: inline;
  }
}
@media screen and (max-width: 767px) {
  #container {
    height: 100%;
  }
  #container .pc {
    display: none;
  }
  #container .sp {
    display: block;
  }
  #container img.pc {
    display: none;
  }
  #container img.sp, #container .svg.sp {
    display: inline;
  }
}
#container .hide {
  display: none;
}

/*-------------------------------------------> link style */
#container a {
  color: inherit;
  outline: none;
  cursor: pointer;
}
#container a:link {
  text-decoration: none;
}
#container a:visited {
  text-decoration: none;
}
#container a:hover {
  text-decoration: none;
}
#container a:active {
  text-decoration: none;
}
#container .OverOpacity,
#container .OverOpacityGroup a {
  opacity: 1;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}
#container .OverOpacity:hover,
#container .OverOpacityGroup a:hover {
  opacity: 0.6;
}

/*-------------------------------------------> Common style */
#container img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#container br.pc {
  display: block;
}
#container br.pc.sp {
  display: block;
}
#container br.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #container br.pc {
    display: none;
  }
  #container br.sp {
    display: block;
  }
  #container br.sp.pc {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  #menuBtn, #pageTop {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #menuBtn {
    width: 12.8vw;
    height: 14.9333333333vw;
    position: fixed;
    z-index: 600;
    right: 8vw;
    top: 66px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
    background: url(../img/sp_menu.svg) no-repeat left top;
    background-size: 100% 100%;
  }
  #menuBtn button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  #menuBtn button span {
    width: 5.8666666667vw;
    height: 0.8vw;
    background: #FFF3C1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
  }
  #menuBtn button span:nth-child(1) {
    translate: -50% 2.1333333333vw;
  }
  #menuBtn button span:nth-child(2) {
    translate: -50% 0;
  }
  #menuBtn button span:nth-child(3) {
    translate: -50% -2.1333333333vw;
  }
  #menuBtn img .menu-fill-line, #menuBtn .svg .menu-fill-line {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .MOpen #menuBtn {
    rotate: 180deg;
  }
  .MOpen #menuBtn button span {
    translate: -50% 0;
  }
  .MOpen #menuBtn button span:nth-child(1), .MOpen #menuBtn button span:nth-child(3) {
    opacity: 0;
  }
  .-hamburger #menuBtn {
    display: none;
  }
  #pageTop {
    width: 7.4666666667vw;
    height: 8.8vw;
    position: fixed;
    z-index: 600;
    right: 8vw;
    top: calc(66px + 16vw);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
  }
  .-hamburger #pageTop {
    display: none;
  }
  .Scroll #pageTop {
    pointer-events: auto;
    opacity: 1;
  }
  .MOpen .corporateHeader {
    opacity: 0;
    pointer-events: none;
  }
}
/*-------------------------------------------> Layout */
#container {
  position: relative;
  width: 100%;
}
#container .side {
  position: sticky;
  top: 0;
  height: calc(100vh - 92px);
}
.Scroll #container .side {
  height: 100vh;
}
#container .side {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: calc((100% - 375px) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#container .side.sideLeft {
  left: 0;
  float: left;
}
#container .side.sideLeft .frame {
  margin: auto 0 auto auto;
}
#container .side.sideRight {
  right: 0;
  float: right;
}
#container .side.sideRight .frame {
  margin: auto auto auto 0;
}
#container .side .frame {
  width: 100%;
  max-width: 678.75px;
}
#container #main {
  position: relative;
  z-index: 100;
  container-type: inline-size;
  width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #container #main {
    overflow: hidden;
    -webkit-filter: drop-shadow(0px 15px 10px rgba(62, 39, 22, 0.3));
            filter: drop-shadow(0px 15px 10px rgba(62, 39, 22, 0.3));
  }
  #container #menuBtn {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #container .side {
    display: none;
  }
  #container #main {
    width: 100vw;
  }
  #container #menuBtn {
    width: 12.8vw;
    height: 14.9333333333vw;
    position: fixed;
    z-index: 600;
    right: 8.8vw;
    top: 13.3333333333vw;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
    background: url(../img/sp_menu.svg) no-repeat left top;
    background-size: 100% 100%;
  }
  #container #menuBtn button {
    display: block;
    width: 100%;
    height: 100%;
  }
  #container #menuBtn img .menu-fill-line, #container #menuBtn .svg .menu-fill-line {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .MOpen #container #menuBtn {
    opacity: 1;
    pointer-events: auto;
  }
  .MOpen #container #menuBtn img .menu-fill-line.line01, .MOpen #container #menuBtn img .menu-fill-line.line03, .MOpen #container #menuBtn .svg .menu-fill-line.line01, .MOpen #container #menuBtn .svg .menu-fill-line.line03 {
    opacity: 0;
  }
}
#container {
  /*-------------------------------------------> menu */
}
@media screen and (min-width: 768px) {
  #container #menu {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #container #menu {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: #A40101;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  #container #menu::before, #container #menu::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 16.2666666667vw;
  }
  #container #menu::before {
    background: #A40101 url(../img/recipe_frame_top.png) no-repeat left top;
    background-size: 100% auto;
    top: 0;
  }
  #container #menu::after {
    background: #A40101 url(../img/recipe_frame_bottom.png) no-repeat left bottom;
    background-size: 100% auto;
    bottom: 0;
  }
  #container #menu .frame {
    width: 100%;
    height: 100%;
    background: url(../img/recipe_frame_middle.png) repeat-y center top;
    background-size: 100% auto;
    padding-top: 16.2666666667vw;
    padding-bottom: 16.2666666667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #container #menu .frame ul {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: auto;
    opacity: 0;
    -webkit-transition: all 0.3s 0.15s ease-out;
    transition: all 0.3s 0.15s ease-out;
  }
  #container #menu .frame ul li {
    color: #E0C05D;
    font-size: 46px; /* legacy */
    font-size: 6.1333333333vw;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  #container #menu .frame ul li a {
    position: relative;
    color: inherit;
    display: block;
  }
  #container #menu .frame ul li a::after {
    content: "◆";
    display: block;
    width: auto;
    position: absolute;
    left: -1.5em;
    top: 0;
    scale: 0.6;
  }
  #container #menu .frame ul li + li {
    margin-top: 9.3333333333vw;
  }
  .MOpen #container #menu {
    pointer-events: auto;
    opacity: 1;
  }
  .MOpen #container #menu .frame ul {
    opacity: 1;
  }
}

/*-------------------------------------------> pageTop */
/*
#pageTop {
	@media screen and ($over-tab) {
		display: none;
	}
	@media screen and ($less-tab) {
		position: fixed;
		z-index: 200;
		width: vw(64);
		height: vw(64);
		right: vw(15);
		bottom: vw(15);
		a {
			display: block;
			img, .svg {
				filter: drop-shadow(vw(3) vw(3) vw(5) rgba($COLOR ,0.5));				
			}
		}
		pointer-events: none;
		opacity: 0;
	}
	.Scroll & {
		pointer-events: auto;
		opacity: 1;
	}
}
*/
/*-------------------------------------------> BlogCode */
.blogCode {
  font-size: 32px;
  line-height: 1.625;
  letter-spacing: 0em;
}
.blogCode p, .blogCode ul, .blogCode ol, .blogCode table {
  margin-bottom: 2em;
}
.blogCode ul, .blogCode ol {
  margin-left: 1.5em;
}
.blogCode h1, .blogCode h2, .blogCode h3, .blogCode h4, .blogCode h5, .blogCode h6 {
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  font-weight: bold;
}
.blogCode h1, .blogCode h2 {
  font-size: 40px;
}
.blogCode h3 {
  font-size: 35px;
}
.blogCode h4 {
  font-size: 30px;
}
.blogCode h5 {
  font-size: 25px;
}
.blogCode h6 {
  font-size: 20px;
}
.blogCode ul {
  list-style: disc;
}
.blogCode ol {
  list-style: decimal;
}
.blogCode li {
  list-style-position: outside;
}
.blogCode a {
  text-decoration: underline;
  color: #3e2716;
}
.blogCode a:hover {
  background: #3e2716;
}
.blogCode strong, .blogCode b {
  font-weight: bold;
}
.blogCode img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .blogCode {
    font-size: 32px; /* legacy */
    font-size: 4.2666666667vw;
    line-height: 1.625;
    letter-spacing: 0em;
  }
  .blogCode h1, .blogCode h2, .blogCode h3, .blogCode h4, .blogCode h5, .blogCode h6 {
    line-height: 1.5;
  }
  .blogCode h1, .blogCode h2 {
    font-size: 5.3333333333vw;
  }
  .blogCode h3 {
    font-size: 4.6666666667vw;
  }
  .blogCode h4 {
    font-size: 4vw;
  }
  .blogCode h5 {
    font-size: 3.3333333333vw;
  }
  .blogCode h6 {
    font-size: 2.6666666667vw;
  }
}

/*-------------------------------------------> Loading */
#Loading {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #A40101;
}
#Loading .Loading-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#Loading .Loading-wrap .loader {
  background: #FFF;
  padding: 20px;
}
#Loading .Loading-wrap .loader img {
  width: 185px;
}
@media screen and (max-width: 767px) {
  #Loading .Loading-wrap .loader {
    padding: 2.6666666667vw;
  }
  #Loading .Loading-wrap .loader img {
    width: 46.6666666667vw;
  }
}

/*-------------------------------------------> plugin style */
/* Slick */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  min-height: 1px;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -30px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 12px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 12px;
  width: 12px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  text-indent: -9999px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #3e2716;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: #3e2716;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: #3e2716;
  opacity: 0.75;
}

@media screen and (max-width: 767px) {
  .slick-dotted.slick-slider {
    margin-bottom: 80px;
  }
  .slick-dots {
    bottom: -80px;
  }
  .slick-dots li {
    height: 25px;
    width: 25px;
    margin: 0 25px;
  }
  .slick-dots li button {
    height: 25px;
    width: 25px;
    padding: 0px;
  }
  .slick-dots li button:before {
    width: 25px;
    height: 25px;
    border-radius: 12px;
    line-height: 25px;
  }
}
/* Arrange slider */
#arrange .slickSlide.slick-slider {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  row-gap: 5.6cqw;
  margin-bottom: 0;
}
#arrange .slick-list {
  -ms-grid-row: 1;
  grid-row: 1;
  grid-column: 1/-1;
  min-width: 0;
}
#arrange .slick-prev,
#arrange .slick-next {
  position: relative;
  inset: auto;
  z-index: 1;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-row-align: start;
      align-self: start;
  width: 3.3333333333cqw;
  height: 8.4cqw;
  padding: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
#arrange .slick-prev img,
#arrange .slick-next img {
  display: block;
  width: 100%;
  height: 100%;
}
#arrange .slick-prev {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-column-align: start;
      justify-self: start;
  margin-left: 13.0666666667cqw;
}
#arrange .slick-next {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-column-align: end;
      justify-self: end;
  margin-right: 12.1333333333cqw;
}
#arrange .slick-dots {
  position: relative;
  inset: auto;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row-align: center;
      align-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4666666667cqw;
  width: auto;
  height: 2.2666666667cqw;
  padding: 0;
  -webkit-transform: translate(0.4666666667cqw, 0.4cqw);
          transform: translate(0.4666666667cqw, 0.4cqw);
}
#arrange .slick-dots li {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 2.2666666667cqw;
          flex: 0 0 2.2666666667cqw;
  width: 2.2666666667cqw;
  height: 2.2666666667cqw;
  margin: 0;
}
#arrange .slick-dots li button {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0.2666666667cqw solid #E0C05D;
  border-radius: 50%;
  background: transparent;
}
#arrange .slick-dots li button::before {
  content: none;
}
#arrange .slick-dots li.slick-active button {
  background: #E0C05D;
}

/*
@media screen and ($over-tab) {}
@media screen and ($less-tab) {}
*/
/*-------------------------------------------> PC - side */
#container .sideLeft::before, #container .sideLeft::after, #container .sideRight::before, #container .sideRight::after {
  content: "";
  width: 100%;
  height: 26px;
  background: url(../img/pc_line.png) repeat-x 187px 0px;
  position: absolute;
  left: 0;
  z-index: 100;
}
#container .sideLeft::before, #container .sideRight::before {
  top: 4px;
  scale: 1 -1;
}
#container .sideLeft::after, #container .sideRight::after {
  bottom: 4px;
}
#container .sideRight::before, #container .sideRight::after {
  background-position: -187px 0px;
}
#container .sideLeft {
  color: #E0C05D;
  background: #371400;
}
#container .sideLeft .sideLogo {
  width: clamp(0px, 100% - 60px, 278px);
  position: absolute;
  top: 20px;
  left: 30px;
}
#container .sideLeft .navi {
  width: min(100%, 190px);
  margin: auto;
}
#container .sideLeft .navi ul {
  width: 100%;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0em;
}
#container .sideLeft .navi ul > li {
  position: relative;
  padding-left: 0;
}
#container .sideLeft .navi ul > li + li {
  margin-top: 25px;
}
#container .sideLeft .navi ul > li a {
  display: inline-block;
}
#container .sideLeft .navi ul > li img, #container .sideLeft .navi ul > li .svg {
  display: block;
}
#container .sideLeft .navi ul > li .sub > li {
  margin-top: 22px;
  -webkit-transition: translate 0.3s ease-out;
  transition: translate 0.3s ease-out;
}
#container .sideLeft .navi ul > li .sub > li + li {
  margin-top: 11px;
}
#container .sideLeft .navi ul > li .sub > li.hidden {
  height: 0;
  margin-top: 0;
  visibility: hidden;
}
#container .sideLeft .navi ul > li .sub > li.hidden + li {
  margin-top: 22px;
}
#container .sideLeft .navi ul > li .sub > li.active {
  translate: 1em 0;
}
#container .sideLeft .navi ul > li .sub > li.active::after {
  display: none;
}
#container .sideLeft .navi ul > li.active::after {
  content: "◆";
  display: block;
  width: auto;
  position: absolute;
  left: -2em;
  top: 0;
  scale: 0.6;
}
#container .sideRight {
  padding: 0 min(2.8125%, 36px);
}
#container .sideRight .frame .link {
  width: 170px;
  height: 198px;
  background: url(../img/right_button_base.png) no-repeat left top;
  position: absolute;
  z-index: 200;
  left: 50%;
  bottom: 70px;
  translate: -50% 0;
}
#container .sideRight .frame .link a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
#container .sideRight .frame .link a img {
  position: relative;
  z-index: 10;
  -webkit-transition: scale 0.3s ease-out;
  transition: scale 0.3s ease-out;
}
#container .sideRight .frame .link a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/right_button_blur.png) no-repeat left top;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: -webkit-filter 0.3s ease-out;
  transition: -webkit-filter 0.3s ease-out;
  transition: filter 0.3s ease-out;
  transition: filter 0.3s ease-out, -webkit-filter 0.3s ease-out;
}
#container .sideRight .frame .link a:hover img {
  scale: 0.9;
}
#container .sideRight .frame .link a:hover::before {
  -webkit-filter: blur(7px);
          filter: blur(7px);
}
#container .sideRight .sideSlide {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
#container .sideRight .sideSlide .slide {
  width: 100%;
  height: 100vh;
}
#container .sideRight .sideSlide .slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right bottom;
     object-position: right bottom;
}

/*-------------------------------------------> #Main */
#main {
  background: #000;
}
#main #cover {
  position: relative;
  background: #A40101 url(../img/bg_cover.png) no-repeat center bottom;
  background-size: 100% auto;
  width: 100%;
  min-height: 230.1333333333cqw;
}
#main #cover .rayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 1.3s ease-out;
  transition: all 1.3s ease-out;
}
#main #cover .rayer.logo {
  z-index: 100;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#main #cover .rayer.copy {
  z-index: 90;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
#main #cover .rayer.kana {
  z-index: 80;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
#main #cover .rayer.icon {
  z-index: 70;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
#main #cover .rayer.yuge {
  z-index: 60;
  -webkit-transition-delay: 2.5s;
          transition-delay: 2.5s;
  translate: 0 6.6666666667cqw;
}
#main #cover .rayer.men {
  z-index: 50;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
  translate: 0 6.6666666667cqw;
}
#main #cover .rayer .fill-logo {
  opacity: 0;
  scale: 1.5;
  fill: #fff;
  transform-box: fill-box;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
#main #cover.inView .rayer {
  opacity: 1;
  translate: 0 0;
}
#main #cover.inView .rayer.logo {
  opacity: 1;
}
#main #cover.inView .rayer.logo .fill-logo {
  opacity: 1;
  scale: 1;
}
#main #cover.inView .rayer.logo .logo1 {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
#main #cover.inView .rayer.logo .logo2 {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
#main #cover.inView .rayer.logo .logo3 {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
#main #cover.inView .rayer.logo .logo4 {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
#main #about {
  position: relative;
  isolation: isolate;
  min-height: 157.3333333333cqw;
}
#main #about .contents {
  position: relative;
  z-index: 1;
  padding-top: 11.3333333333cqw;
}
#main #about .title {
  width: 51.7333333333cqw;
  margin-left: 24.9333333333cqw;
}
#main #about .title img {
  display: block;
  width: 100%;
}
#main #about .text {
  margin-top: 10.6666666667cqw;
  color: #FFF;
  text-align: center;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 2.1875;
  letter-spacing: 0em;
}
#main #about .text::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.59375em;
  content: "";
}
#main #about .text::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.59375em;
  content: "";
}
#main #about .text p + p {
  margin-top: 9.3333333333cqw;
}
#main #about .bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
#main #about .bg > div {
  position: absolute;
}
#main #about .bg img {
  display: block;
  width: 100%;
}
#main #about .bg .parts1 {
  top: -1.3333333333cqw;
  left: -46.6666666667cqw;
  width: 74.9333333333cqw;
}
#main #about .bg .parts2 {
  top: 136.4cqw;
  left: 78.4cqw;
  width: 43.2cqw;
}
#main #point {
  position: relative;
  isolation: isolate;
  min-height: 388.9333333333cqw;
}
#main #point .contents {
  position: relative;
  z-index: 1;
}
#main #point .block dl,
#main #point .block dd {
  margin: 0;
}
#main #point .block dt,
#main #point .block .image,
#main #point .block .text {
  margin-right: auto;
  margin-left: auto;
}
#main #point .block dt {
  width: 33.6cqw;
}
#main #point .block .image {
  width: 73.7333333333cqw;
}
#main #point .block img {
  display: block;
  width: 100%;
}
#main #point .point1 .image {
  margin-top: 1.0666666667cqw;
}
#main #point .point1 .text {
  width: 53.8666666667cqw;
  margin-top: 6.6666666667cqw;
}
#main #point .point2 {
  margin-top: 15.6cqw;
}
#main #point .point2 .image {
  margin-top: 0.5333333333cqw;
}
#main #point .point2 .text {
  width: 51.2cqw;
  margin-top: 8cqw;
}
#main #point .point3 {
  margin-top: 15.2cqw;
}
#main #point .point3 .image {
  margin-top: 0.5333333333cqw;
}
#main #point .point3 .text {
  width: 37.7333333333cqw;
  margin-top: 8.1333333333cqw;
}
#main #point .bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
#main #point .bg > div {
  position: absolute;
}
#main #point .bg img {
  display: block;
  width: 100%;
}
#main #point .bg .parts1 {
  top: 111.3333333333cqw;
  left: 73.4666666667cqw;
  width: 43.3333333333cqw;
}
#main #point .bg .parts2 {
  top: 247.0666666667cqw;
  left: -32.5333333333cqw;
  width: 56.4cqw;
}
#main #point .bg .parts3 {
  top: 326.5333333333cqw;
  left: -17.4666666667cqw;
  width: 31.6cqw;
}
#main #point .bg .parts4 {
  top: 350cqw;
  left: 79.8666666667cqw;
  width: 37.0666666667cqw;
}
#main #recipe {
  position: relative;
}
#main #recipe .contents {
  position: relative;
  color: #FFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#a40000), color-stop(41.4%, #670000), to(#520000));
  background: linear-gradient(to bottom, #a40000 0%, #670000 41.4%, #520000 100%);
}
#main #recipe .frameTop {
  height: 24.2666666667cqw;
  background: url(../img/recipe_frame_top.png) no-repeat center bottom;
  background-size: 100% 100%;
}
#main #recipe .frame {
  position: relative;
  background: url(../img/recipe_frame_middle.png) no-repeat center center;
  background-size: 100% 100%;
}
#main #recipe .frameBottom {
  height: 16.2666666667cqw;
  background: url(../img/recipe_frame_bottom.png) no-repeat center top;
  background-size: 100% 100%;
}
#main #recipe .title {
  width: 78.9333333333cqw;
  margin-inline: auto;
}
#main #recipe .readText {
  margin-top: 5.0666666667cqw;
  text-align: center;
  font-size: 18px; /* legacy */
  font-size: 4.8cqw;
  line-height: 1.5555555556;
  letter-spacing: 0em;
}
#main #recipe .block {
  width: 100%;
}
#main #recipe .block.recipe01 {
  margin-top: 13.4666666667cqw;
}
#main #recipe .block.recipe02 {
  margin-top: 19.0666666667cqw;
}
#main #recipe .block.recipe03 {
  margin-top: 18.9333333333cqw;
}
#main #recipe .block a {
  display: block;
  color: inherit;
}
#main #recipe .block a dl dd img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#main #recipe .block a:hover dl dd img {
  translate: 1.3333333333cqw 1.3333333333cqw;
  -webkit-filter: drop-shadow(1.3333333333cqw 1.3333333333cqw 0 #E0C05D);
          filter: drop-shadow(1.3333333333cqw 1.3333333333cqw 0 #E0C05D);
}
#main #recipe .block dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
#main #recipe .block dl dt {
  text-align: center;
  font-size: 18px; /* legacy */
  font-size: 4.8cqw;
  line-height: 1.5555555556;
  letter-spacing: 0em;
}
#main #recipe .block dl dd {
  width: 76.5333333333cqw;
  margin-inline: auto;
}
#main #recipe .block dl dd img {
  -webkit-filter: drop-shadow(2.6666666667cqw 2.6666666667cqw 0 #E0C05D);
          filter: drop-shadow(2.6666666667cqw 2.6666666667cqw 0 #E0C05D);
}
#main #recipe .block.recipe01 dt {
  margin-top: 8.1333333333cqw;
}
#main #recipe .block.recipe02 dt {
  margin-top: 8.2666666667cqw;
}
#main #recipe .block.recipe03 dt {
  margin-top: 8cqw;
}
#main #recipe .link {
  width: 77.3333333333cqw;
  margin: 13.4666666667cqw auto 0;
}
#main #recipe .profile {
  width: 76.8cqw;
  margin: 16.2666666667cqw auto 0;
}
#main #recipe .profile .profileFrame {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 13.7333333333cqw 5.4666666667cqw 18.9333333333cqw;
  background: #000;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 5.4666666667cqw, #000 5.6cqw) left top/51% 51% no-repeat, radial-gradient(circle at 100% 0, transparent 5.4666666667cqw, #000 5.6cqw) right top/51% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 5.4666666667cqw, #000 5.6cqw) left bottom/51% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 5.4666666667cqw, #000 5.6cqw) right bottom/51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 5.4666666667cqw, #000 5.6cqw) left top/51% 51% no-repeat, radial-gradient(circle at 100% 0, transparent 5.4666666667cqw, #000 5.6cqw) right top/51% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 5.4666666667cqw, #000 5.6cqw) left bottom/51% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 5.4666666667cqw, #000 5.6cqw) right bottom/51% 51% no-repeat;
}
#main #recipe .profile .profileTitle {
  width: 43.6cqw;
  margin-inline: auto;
}
#main #recipe .profile .image {
  width: 64.4cqw;
  margin: 5.7333333333cqw auto 0;
}
#main #recipe .profile .text {
  margin-top: 8.1333333333cqw;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.5;
  letter-spacing: 0em;
}
#main #recipe img {
  display: block;
  width: 100%;
}
#main #arrange {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3.2cqw 0 2.6666666667cqw;
  background: url(../img/arrange_bg.png) no-repeat;
  background-size: cover;
}
#main #arrange::before, #main #arrange::after {
  content: "";
  display: block;
  height: 4.4cqw;
  background: url(../img/arrange_line.png) no-repeat center center;
  background-size: auto 4.4cqw;
}
#main #arrange::after {
  margin-top: 23.4666666667cqw;
}
#main #arrange .contents {
  padding-top: 6.5333333333cqw;
}
#main #arrange .title {
  width: 85.0666666667cqw;
  margin-inline: auto;
}
#main #arrange .readText {
  margin-top: 8.2666666667cqw;
  color: #FFF;
  text-align: center;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.6875;
  letter-spacing: 0em;
}
#main #arrange .slickSlide {
  margin-top: 12.9333333333cqw;
}
#main #arrange .slickSlide .slide {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-inline: 4cqw;
  padding-bottom: 0.5333333333cqw;
}
#main #arrange .slickSlide .slide .image {
  width: 100%;
}
#main #arrange .slickSlide .slide .name {
  height: 14.4cqw;
  margin-top: 1.0666666667cqw;
  color: #E0C05D;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.6875;
  letter-spacing: 0em;
  text-align: center;
}
#main #arrange .slickSlide .slide .name strong {
  display: inline-block;
  font-weight: inherit;
  border-bottom: solid 0.2666666667cqw #E0C05D;
}
#main #arrange img {
  display: block;
  width: 100%;
}
#main #howto {
  background: url(../img/bg_howto.jpg) no-repeat center top;
  background-size: cover;
}
#main #howto .contents {
  padding-top: 13.3333333333cqw;
  padding-bottom: 15.0666666667cqw;
}
#main #howto .title {
  width: 84cqw;
  margin-inline: auto;
}
#main #howto .title img {
  display: block;
  width: 100%;
}
#main #howto ol {
  width: 73.7333333333cqw;
  margin: 7.7333333333cqw auto 0;
}
#main #howto ol li {
  width: 100%;
}
#main #howto ol li img {
  display: block;
  width: 100%;
}
#main #howto ol li:nth-child(2) {
  margin-top: 18.8cqw;
}
#main #howto ol li:nth-child(3) {
  width: 75.8666666667cqw;
  margin-top: 19.4666666667cqw;
}
#main #howto ol li:nth-child(3) img {
  max-width: none;
}
#main #howto .check {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 74cqw;
  margin: 13.2cqw auto 0;
  padding: 6.9333333333cqw 5.2cqw 11.7333333333cqw;
  border: solid 0.5333333333cqw #E0C05D;
}
#main #howto .check dl dt {
  color: #E0C05D;
  text-align: center;
  font-size: 24px; /* legacy */
  font-size: 6.4cqw;
  line-height: 1;
  letter-spacing: 0em;
}
#main #howto .check dl dd {
  margin-top: 5.8666666667cqw;
  color: #FFF;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.8125;
  letter-spacing: 0em;
}
#main #howto .check dl dd p:nth-child(2) {
  margin-top: 5.0666666667cqw;
}
#main #howto .check dl dd p:nth-child(3) {
  margin-top: 3.2cqw;
}
#main #item {
  position: relative;
  z-index: 1;
  background: url(../img/bg_item.png) no-repeat center center;
  background-size: cover;
}
#main #item::before, #main #item::after {
  content: "";
  display: block;
  width: 100%;
  height: 32cqw;
  position: absolute;
  z-index: 10;
  left: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
#main #item::before {
  top: 0;
  background-image: url(../img/item_frame_top.png);
}
#main #item::after {
  bottom: 0;
  background-image: url(../img/item_frame_bottom.png);
}
#main #item .contents {
  padding-top: 32cqw;
  padding-bottom: 26cqw;
}
#main #item .image {
  width: 25.0666666667cqw;
  margin-inline: auto;
}
#main #item .image img {
  display: block;
  width: 100%;
}
#main #item .logo {
  margin-top: 12.4cqw;
  text-align: center;
}
#main #item .logo span {
  display: block;
  color: #E0C05D;
  font-size: 22px; /* legacy */
  font-size: 5.8666666667cqw;
  line-height: 1;
  letter-spacing: 0em;
}
#main #item .logo br {
  display: none;
}
#main #item .logo img {
  display: block;
  width: 61.4666666667cqw;
  margin: 4cqw auto 0;
}
#main #item .linkWrap {
  width: 76.6666666667cqw;
  margin: 12.5333333333cqw auto 0;
}
#main #item .linkWrap .link + .link {
  margin-top: 5.3333333333cqw;
}
#main #item .linkWrap .link a,
#main #item .linkWrap .link img {
  display: block;
  width: 100%;
}
#main #item.recipe {
  padding-top: 65.3333333333cqw;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, #830c0c));
  background-image: linear-gradient(transparent, #830c0c 10% 100%);
}
#main #item.recipe::before {
  content: "";
  display: block;
  width: 100%;
  height: 4.4cqw;
  background: url(../img/arrange_line.png) no-repeat center top;
  background-size: auto 4.4cqw;
  position: absolute;
  left: 0;
  top: 46.2666666667cqw;
  opacity: 0.33;
}
#main #item.recipe .contents {
  padding-top: 0;
}
#main #item.recipe .logo {
  margin-top: 0;
  margin-bottom: 12.4cqw;
}
#main.recipe2 {
  color: #FFF;
  background: url(../img/bg_recipe2.jpg) repeat-y center top;
  background-size: 100% auto;
}
#main #cover2 .profile {
  padding-top: 36cqw;
  padding-bottom: 9.8666666667cqw;
  margin-top: -31.0666666667cqw;
  width: 84.8cqw;
  background: #E0C05D;
  margin-left: auto;
  margin-right: auto;
}
#main #cover2 .profile .frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 76.2666666667cqw;
  margin-left: auto;
  margin-right: auto;
}
#main #cover2 .profile .frame .text {
  color: #000;
  font-size: 15px; /* legacy */
  font-size: 4cqw;
  line-height: 1.6666666667;
  letter-spacing: -0.12em;
}
#main #cover2 .profile .frame .text::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.3333333333em;
  content: "";
}
#main #cover2 .profile .frame .text::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.3333333333em;
  content: "";
}
#main #cover2 .profile .frame .text {
  width: 48.8cqw;
}
#main #cover2 .profile .frame .image {
  width: 27.4666666667cqw;
}
#main #cover2 .linkWrap {
  width: 84.8cqw;
  padding-bottom: 24cqw;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#E0C05D), to(transparent));
  background-image: linear-gradient(#E0C05D, transparent);
  margin-left: auto;
  margin-right: auto;
}
#main #cover2 .linkWrap .link {
  width: 78.9333333333cqw;
  margin-left: auto;
  margin-right: auto;
}
#main #cover2 .linkWrap .link + .link {
  margin-top: 4.5333333333cqw;
}
#main #recipe2 .block {
  color: #FFF;
}
#main #recipe2 .block .readText {
  color: #E0C05D;
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.4375;
  letter-spacing: 0em;
}
#main #recipe2 .block .readText::before {
  display: block;
  width: 0;
  height: 0;
  margin-top: -0.21875em;
  content: "";
}
#main #recipe2 .block .readText::after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: -0.21875em;
  content: "";
}
#main #recipe2 .block .readText {
  text-align: center;
  margin-top: 5.3333333333cqw;
  margin-bottom: 9.3333333333cqw;
}
#main #recipe2 .block .material,
#main #recipe2 .block .howto {
  color: #FFF;
  width: 73.8666666667cqw;
  margin-left: auto;
  margin-right: auto;
}
#main #recipe2 .block .material > dt {
  font-size: 18px; /* legacy */
  font-size: 4.8cqw;
  line-height: 1;
  letter-spacing: 0em;
  font-weight: inherit;
  text-align: center;
  border-bottom: solid 1px #E0C05D;
  padding-bottom: 1em;
  margin-bottom: 0.5em;
}
#main #recipe2 .block .material > dd {
  font-size: 16px; /* legacy */
  font-size: 4.2666666667cqw;
  line-height: 1.75;
  letter-spacing: 0em;
  text-align: left;
}
#main #recipe2 .block .material > dd .sub {
  margin-top: 1em;
}
#main #recipe2 .block .material > dd .sub dt {
  font-weight: inherit;
}
#main #recipe2 .block .material > dd .set + .set {
  margin-top: 1em;
}
#main #recipe2 .block .material > dd .set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.5em;
}
#main #recipe2 .block .material > dd .set dd {
  padding-left: 0.5em;
  margin-left: 0.5em;
  border-left: solid 1px #FFF;
}
#main #recipe2 .block .howto {
  margin-top: 14.6666666667cqw;
}
#main #recipe2 .block .howto .title {
  margin-bottom: 8cqw;
}
#main #recipe2 .block .howto ol li {
  font-size: 14px; /* legacy */
  font-size: 3.7333333333cqw;
  line-height: 1.5;
  letter-spacing: 0em;
  position: relative;
  padding-left: 10.6666666667cqw;
}
#main #recipe2 .block .howto ol li::before {
  content: "";
  font-family: "Zen Old Mincho", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  color: #E0C05D;
  font-size: 20px; /* legacy */
  font-size: 5.3333333333cqw;
  line-height: 1;
  letter-spacing: 0em;
  position: absolute;
  top: 0;
  left: 0;
}
#main #recipe2 .block .howto ol li:nth-child(1)::before {
  content: "1.";
}
#main #recipe2 .block .howto ol li:nth-child(2)::before {
  content: "2.";
}
#main #recipe2 .block .howto ol li:nth-child(3)::before {
  content: "3.";
}
#main #recipe2 .block .howto ol li:nth-child(4)::before {
  content: "4.";
}
#main #recipe2 .block .howto ol li:nth-child(5)::before {
  content: "5.";
}
#main #recipe2 .block .howto ol li:nth-child(6)::before {
  content: "6.";
}
#main #recipe2 .block .howto ol li + li {
  margin-top: 2em;
}
#main #recipe2 .block#recipe02 {
  position: relative;
  z-index: 1;
  margin-top: 48cqw;
  margin-bottom: 48cqw;
}
#main #recipe2 .block#recipe02::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% + 48cqw);
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, #830c0c), to(transparent));
  background-image: linear-gradient(transparent, #830c0c 10% 90%, transparent);
  position: absolute;
  top: -24cqw;
  left: 0;
  z-index: -1;
}

/* animation
.image {
	animation-delay: 0.3s;
}
&.inView {
	.base, .image {
		animation-name: fadeInUp;
	}
}
*/
.scroll p a::after {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-name: scrollIcon;
          animation-name: scrollIcon;
}

/*-------------------------------------------> animation module */
.anim-fadeIn {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeIn,
.inView .isAnim.inView .anim-fadeIn,
.inView .anim-fadeIn,
.inView.anim-fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

.inView .isAnim.anim-fadeIn,
.inView .isAnim .anim-fadeIn {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeInUp {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInUp,
.inView .isAnim.inView .anim-fadeInUp,
.inView .anim-fadeInUp,
.inView.anim-fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

.inView .isAnim.anim-fadeInUp,
.inView .isAnim .anim-fadeInUp {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeInDown {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInDown,
.inView .isAnim.inView .anim-fadeInDown,
.inView .anim-fadeInDown,
.inView.anim-fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

.inView .isAnim.anim-fadeInDown,
.inView .isAnim .anim-fadeInDown {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeInRight {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInRight,
.inView .isAnim.inView .anim-fadeInRight,
.inView .anim-fadeInRight,
.inView.anim-fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

.inView .isAnim.anim-fadeInRight,
.inView .isAnim .anim-fadeInRight {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeInLeft {
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
          animation-timing-function: cubic-bezier(0.5, 0.3, 0, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInLeft,
.inView .isAnim.inView .anim-fadeInLeft,
.inView .anim-fadeInLeft,
.inView.anim-fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

.inView .isAnim.anim-fadeInLeft,
.inView .isAnim .anim-fadeInLeft {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-swing {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-swing,
.inView .isAnim.inView .anim-swing,
.inView .anim-swing,
.inView.anim-swing {
  -webkit-animation-name: imgswing;
          animation-name: imgswing;
}

.inView .isAnim.inView.anim-swing.swing2,
.inView .isAnim.inView .anim-swing.swing2,
.inView .anim-swing.swing2,
.inView.anim-swing.swing2 {
  -webkit-animation-name: imgswing2;
          animation-name: imgswing2;
}

.inView .isAnim.anim-swing,
.inView .isAnim .anim-swing {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-loop {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-loop,
.inView .isAnim.inView .anim-loop,
.inView .anim-loop,
.inView.anim-loop {
  -webkit-animation-name: loop;
          animation-name: loop;
}

.inView .isAnim.anim-loop,
.inView .isAnim .anim-loop {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeText span {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  clip-path: inset(0 100% 0 0);
}

.inView .isAnim.inView.anim-fadeText span,
.inView .isAnim.inView .anim-fadeText span,
.inView .anim-fadeText span,
.inView.anim-fadeText span {
  -webkit-animation: fadeText 1s ease-out forwards;
          animation: fadeText 1s ease-out forwards;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(1),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(1),
.inView .anim-fadeText span:nth-of-type(1),
.inView.anim-fadeText span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(2),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(2),
.inView .anim-fadeText span:nth-of-type(2),
.inView.anim-fadeText span:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(3),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(3),
.inView .anim-fadeText span:nth-of-type(3),
.inView.anim-fadeText span:nth-of-type(3) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(4),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(4),
.inView .anim-fadeText span:nth-of-type(4),
.inView.anim-fadeText span:nth-of-type(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(5),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(5),
.inView .anim-fadeText span:nth-of-type(5),
.inView.anim-fadeText span:nth-of-type(5) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(6),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(6),
.inView .anim-fadeText span:nth-of-type(6),
.inView.anim-fadeText span:nth-of-type(6) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(7),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(7),
.inView .anim-fadeText span:nth-of-type(7),
.inView.anim-fadeText span:nth-of-type(7) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(8),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(8),
.inView .anim-fadeText span:nth-of-type(8),
.inView.anim-fadeText span:nth-of-type(8) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(9),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(9),
.inView .anim-fadeText span:nth-of-type(9),
.inView.anim-fadeText span:nth-of-type(9) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.inView .isAnim.inView.anim-fadeText span:nth-of-type(10),
.inView .isAnim.inView .anim-fadeText span:nth-of-type(10),
.inView .anim-fadeText span:nth-of-type(10),
.inView.anim-fadeText span:nth-of-type(10) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.inView .isAnim.anim-fadeText,
.inView .isAnim .anim-fadeText {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-fadeImage img {
  opacity: 0;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeImage img,
.inView .isAnim.inView .anim-fadeImage img,
.inView .anim-fadeImage img,
.inView.anim-fadeImage img {
  -webkit-animation-name: fadeImage;
          animation-name: fadeImage;
}

.inView .isAnim.anim-fadeImage img,
.inView .isAnim .anim-fadeImage img {
  -webkit-animation-name: none;
          animation-name: none;
}

.linkArrow img, .linkArrow .svg {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.linkArrow:hover img, .linkArrow:hover .svg {
  -webkit-animation-name: linkArrow;
          animation-name: linkArrow;
}
.linkArrow.arrowR:hover img, .linkArrow.arrowR:hover .svg {
  -webkit-animation-name: linkArrowR;
          animation-name: linkArrowR;
}

.anim-slice {
  clip-path: inset(0 100% 0 0);
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
          animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  will-change: filter;
}

.inView .isAnim.inView.anim-slice,
.inView .isAnim.inView .anim-slice,
.inView .anim-slice,
.inView.anim-slice {
  -webkit-animation-name: slice;
          animation-name: slice;
}

.inView .isAnim.anim-slice,
.inView .isAnim .anim-slice {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-slice.reverse {
  clip-path: inset(0 0 0 100%);
}

.inView .isAnim.inView.anim-slice.reverse,
.inView .isAnim.inView .anim-slice.reverse,
.inView .anim-slice.reverse,
.inView.anim-slice.reverse {
  -webkit-animation-name: sliceR;
          animation-name: sliceR;
}

.inView .isAnim.anim-slice.reverse,
.inView .isAnim .anim-slice.reverse {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-ddon {
  opacity: 0;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-ddon,
.inView .isAnim.inView .anim-ddon,
.inView .anim-ddon,
.inView.anim-ddon {
  -webkit-animation-name: ddon;
          animation-name: ddon;
}

.inView .isAnim.anim-ddon,
.inView .isAnim .anim-ddon {
  -webkit-animation-name: none;
          animation-name: none;
}

.anim-bound {
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.inView .isAnim.inView.anim-bound,
.inView .isAnim.inView .anim-bound,
.inView .anim-bound,
.inView.anim-bound {
  -webkit-animation-name: bound;
          animation-name: bound;
}

.inView .isAnim.anim-bound,
.inView .isAnim .anim-bound {
  -webkit-animation-name: none;
          animation-name: none;
}

/* delay */
.delay0 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.delay1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.delay2 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.delay3 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.delay4 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.delay5 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.delay6 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.delay7 {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.delay8 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.delay9 {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.delay10 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.delay11 {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

/*-------------------------------------------> keyframe */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes imgswing {
  0% {
    rotate: -15deg;
  }
  49% {
    rotate: -15deg;
  }
  50% {
    rotate: 15deg;
  }
  99% {
    rotate: 15deg;
  }
  100% {
    rotate: -15deg;
  }
}
@keyframes imgswing {
  0% {
    rotate: -15deg;
  }
  49% {
    rotate: -15deg;
  }
  50% {
    rotate: 15deg;
  }
  99% {
    rotate: 15deg;
  }
  100% {
    rotate: -15deg;
  }
}
@-webkit-keyframes iconScroll {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 2.6666666667cqw 0;
  }
}
@keyframes iconScroll {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 2.6666666667cqw 0;
  }
}
@-webkit-keyframes loop {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}
@keyframes loop {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}
@-webkit-keyframes fadeText {
  0% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  30% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  /*
   from {
     opacity: 0;
     transform: translateX(-50px);
     clip-path: inset(0 100% 0 0);
   }
   to {
     opacity: 1;
     transform: translateX(0);
     clip-path: inset(0 0 0 0);
   }
  */
}
@keyframes fadeText {
  0% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  30% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  /*
   from {
     opacity: 0;
     transform: translateX(-50px);
     clip-path: inset(0 100% 0 0);
   }
   to {
     opacity: 1;
     transform: translateX(0);
     clip-path: inset(0 0 0 0);
   }
  */
}
@-webkit-keyframes fadeImage {
  from {
    opacity: 0;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes fadeImage {
  from {
    opacity: 0;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes hoverImage {
  from {
    -webkit-transform: translateX(1);
            transform: translateX(1);
  }
  to {
    -webkit-transform: translateX(1.08);
            transform: translateX(1.08);
  }
}
@keyframes hoverImage {
  from {
    -webkit-transform: translateX(1);
            transform: translateX(1);
  }
  to {
    -webkit-transform: translateX(1.08);
            transform: translateX(1.08);
  }
}
@-webkit-keyframes slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@keyframes slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@-webkit-keyframes sliceR {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@keyframes sliceR {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
@-webkit-keyframes ddon {
  0% {
    opacity: 0;
    scale: 1.5;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes ddon {
  0% {
    opacity: 0;
    scale: 1.5;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@-webkit-keyframes bound {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes bound {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}